네비게이션 메뉴 패턴 3) 개별 메뉴 바

1-3_개별 메뉴바.zip

0.32MB

일반 메뉴 바에서 기출 변형된 개별 메뉴 바 입니다.

 

< html 필수참조사항 >

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

 

< CSS 필수참조사항 >

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

 

< javascript 필수참조사항 >

일반 메뉴 바와 지칭하는 이벤트의 주체가 $('.mainmenu')에서 $('.mainmenu > li')로 바뀝니다.

그리고 리스트의 순서 값만을 따오기 위해 index라는 변수를 만들고 그 값을 저장합니다.

 

mouseover의 실행문 작성시 슬라이드 효과가 발생할 $('.submenu')의 값을

정확하게 index순서에 맞춰 나타내게 만들 수 있도록 eq(index)를 끼워 넣습니다.

그리고 이후 .stop()과 slideDown()을 연결합니다.

 

또한 .mouseleave()이벤트의 실행문은 굳이 바꿀 필요가 없습니다.