네비게이션 메뉴 패턴 5) 세로 over 형

5_세로 over 메뉴.zip

0.20MB

1_4 세로 slide 메뉴바의 기출 변형으로 보면 좋습니다.

< html 필수참조사항 >

1-1 일반 메뉴바 html구조와 100%동일합니다.

 

< CSS 필수참조사항 >

1_4 세로 slide 메뉴바와 비슷하지만 가장 큰 차이점은

.mainmenu li의 height사이즈가 50px로 제한되어 있습니다.

 

이는 .submenu클래스에 position:relative속성을 사용하기 때문입니다.

relative값으로 지정하게 되면, 자기 자신의 위치를 기준으로 띄워 표기할 수 있습니다.

그러나 보통 relative는 자기 자신의 위치 영역이 그대로 유지되므로, 이를 가리기 위해 

.mainmenu li의 height사이즈가 50px로 제한하는 것입니다.

 

이렇게 하면, position:absolute;의 사용처럼 자유로운 위치 이동을 할 수 있고,

또한 자기 자신의 위치를 기준으로 몇 픽셀 만큼 이동하도록 출력할 수 있단 장점이 있습니다.

< javascript 필수참조사항 >

1-3_개별 메뉴바의 스크립트 구조를 사용합니다.