일반 메뉴 바에서 기출 변형된 패턴 : 배경 메뉴 바 입니다.
< 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를 지정합시다.
'웹디자인 기능사 시험예제 > 5-1) 네비게이션 패턴' 카테고리의 다른 글
네비게이션 메뉴 패턴 5) 세로 over 형 (0) | 2020.03.31 |
---|---|
네비게이션 메뉴 패턴 4) 세로 slide 형 (0) | 2020.03.31 |
네비게이션 메뉴 패턴 3) 개별 메뉴 바 (0) | 2020.03.31 |
네비게이션 메뉴 패턴 1) 일반 메뉴 바 (0) | 2020.03.31 |