네비게이션 메뉴 패턴 1) 일반 메뉴 바

1-1_일반 메뉴바.zip

0.32MB

가장 기본적인 구조이면서, 제일 간단한 메뉴 바 만들기 구성입니다. 

 

< html 필수참조사항 >

1-1 일반 메뉴바 html구조입니다. 총 5개의 메뉴 바 리스트는 이 구조를 기본으로 합니다.

특별히 다른 구조는 없고, 오직 1-2배경을 제외하고는 다 같은 구조를 사용합니다.

 

< CSS 필수참조사항 >

1-1 일반 메뉴 바 css 구조입니다. 가장 중요한 것은 .logo클래스에는 float:left;를 부여하되, nav에는 margin-left : .logo클래스의 width값 ; 만큼 지정해야 합니다. 

 

nav에는 float:left를 사용하지 않는 이유는

이후 나올 .submenu들에 position 속성 값이 생기기 때문입니다.

기본적으로 position은 float:속성과 같은 구조로 책정되지 않습니다.

그래서 slide 효과를 지정할 때 움직임에 문제가 발생하게 됩니다.

 

.submenu클래스에는 position:relative 속성을 걸어서 슬라이드 쇼 위로 띄울 수 있도록 지정합시다. 

단, 반드시 z-index값이 .imgslide보다 커야만 슬라이드 쇼 영역 보다 상위에 띄울 수 있습니다. 

이 점에 유의합시다. 

< javascript 필수참조사항 >

기본적으로 마우스 이벤트는 .mouseover() / .mouseleave() 두 가지가 들어갑니다. 

각각 .submenu가 .slideDown()과 .slideUp()에 대응됩니다.

 

그리고 이벤트는 실행 될 때 여러 이벤트가 누적 될 위험성을 지닙니다. 

그래서 실행 문에, 사전에 있던 이벤트를 중지시키는 .stop() 메소드를 넣어 이벤트 누적을 막습니다.