제이쿼리 | 메뉴구성 두가지방법 | mouseenter , mouseleave

1. 각각의 메뉴 선택하면 각각의 하위메뉴가 내려옴

 

html 구성

div>header>section>h1

div>header>section>ul>li>a

div>header>section>ul>li>ul>li>a

 

jquery

$(document).ready(function(){

            $('#menu>li').mouseenter(function(){

                $(this).find('.submenu').stop().slideDown();

                $(this).find('a').addClass('on');

            });

            $('#menu>li').mouseleave(function(){

                $(this).find('.submenu').stop().slideUp();

                $(this).find('a').removeClass('on');

            });

        });

 

내가선택한메뉴의 find('.submenu')를 해야 선택한메뉴의 하위메뉴를 뜻하게됨.

 

* slideUp,slideDown 앞에 stop을 넣어야 여러번마우스대도 여러번 느리게움직이지않고 한번만 움직이게됨.

 

---

2. 메뉴 중에 아무거나 선택해도 하위메뉴 전체가 내려옴

 

html 구성

div>header>section>h1

div>header>section>ul>li>a

div>header>section>div.submenu>ul>li>a

 

jquery

   $(document).ready(function(){

            $('#menu>li,#submenu').mouseenter(function(){

                $('#submenu').stop().slideDown();

            });

            $('#menu>li,#submenu").mouseleave(function(){

                $('#submenu').stop().slideUp();

            });

        });

메뉴들과 하위메뉴들에 마우스대져있을땐 하위메뉴가 내려간다.

: 하위메뉴들에 마우스가 대져있을 때도 내려가있어야하는것이 중요.

 

메뉴들과 하위메뉴들에 마우스가 떠나면 하위메뉴가 올라온다.

 

*여기서 하위메뉴는 모든메뉴들의 하위메뉴 전부를 뜻함.