[JavaScript] jQuery 웹페이지 메뉴 드롭다운 만들기

메뉴 기본 구성

 

html

css

브라우저

현재 서브메뉴는 display: none; 처리되어 브라우저에는 메인 메뉴만 보입니다.

 

 

 

 

 

서브메뉴 한번에 드롭다운하기

 

- slideDown() & slideUp() 이용해서 드롭다운 -

 

$('.gnb').mouseover(function(){})

gnb클래스에 마우스를 갖다대면

$(this).find('.sub')

선택한 요소의 자손들 중에 sub클래스를 찾아

.stop().slideDown();

아래로 슬라이드하며 화면에 나타납니다.

 

$(this)

: 내가 선택한 요소를 가리킵니다.

 

stop()

: 실행 중인 모든 애니메이션을 중지시키고 요소의 상태를 고정시킵니다.

여기서 stop() 명령을 사용하지 않으면 서브메뉴가 slideDown을 반복하게 되기 때문에

서브 메뉴를 고정시키기 위해 stop() 명령을 사용해주어야 합니다.

 

 

마우스를 메인메뉴에 올렸을 때 slideDown된 결과

 

 

 

 

 

- animate() 이용해서 드롭다운 -

 

선택한 요소의 높이값을 변경하여 서브메뉴가 보이도록 조절합니다.

 

 

 

 

 

선택한 해당 메인의 서브메뉴만 드롭다운 하기

 

$('.gnb .d1').mouseover()

mouseover의 선택자를 메인 메뉴로 넣어주면 됩니다.