네비게이션 메뉴 패턴 2) 배경 메뉴 바

1-2_배경 메뉴바.zip

0.32MB

일반 메뉴 바에서 기출 변형된 패턴 : 배경 메뉴 바 입니다.

 

< html 필수참조사항 >

1-1 일반 메뉴바 html구조에 <div class="bg"></div>를 추가해 만든 배경 메뉴바 입니다.

위치는 header의 하위 요소이고, <nav>와 동등하면서, 가장 마지막에 위치하면 됩니다.

즉, </header>의 바로 위에 위치하면 됩니다.

 

< CSS 필수참조사항 >

1-1 일반 메뉴바 css구조에 .bg를 작성합니다. 사이즈는 폭 1200 높이 250px 언저리면 괜찮습니다.

배경을 추가해야 영역에 뜨는지 아닌지 알 수 있습니다. 
z-index의 수준은 .imgslide보다는 높게, .submenu 보다는 낮아야 합니다.

 

< javascript 필수참조사항 >

$('.mainmenu,.bg')로 동시에 둘 다 이벤트가 동작하도록 만들어야 합니다. 

이벤트를 선언하는 부분과 동작 메소드 slideDown(), slideUp() 둘 모두에 .bg를 지정합시다.