jquery 클릭시 메뉴를 접었다 펼치는 소스

메뉴 클릭시 펼쳐지는 소스

 

1. <style>
2. .menu a { cursor:pointer;}
3. .menu .hide { display:none;}
4. </style>
6. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
7. <script>
8.  $(document).ready(function(){
9.   $(".menu>a").click(function(){
10.    $(this).next("ul").toggleClass("hide");
11.    });
12.   });
13.   </script>

 

 

메뉴 클릭시 부드럽게 펼쳐지는 소스

 

1. <style>
2. .menu a { cursor:pointer;}
3. .menu .hide { display:none;}
4. </style>
5. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
6. <script>
7. $(document).ready(function(){
8. $(".menu>a").click(function(){
9.  var submenu = $(this).next("ul");
10.   if( submenu.is(":visible") ){
11.   submenu.slideUp();
12.   }else{
13.    submenu.slideDown();
14.    }
15.    });
16.    });
17. </script>

 

 

메뉴에 마우스 오버시 부드럽게 펼쳐지는 소스

 

1. <style>
2. .menu a { cursor:pointer;}
3. .menu .hide { display:none;}
4. </style>
5. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
6. <script>
7. $(document).ready(function(){
8.  $(".menu>a").click(function(){
9.   var submenu = $(this).next("ul");
10.   if( submenu.is(":visible") ){
11.    submenu.slideUp();
12.    }else{
13.     submenu.slideDown();
14.     }
15.    }).mouseover(function(){
16.     $(this).next("ul").slideDown();
17.     });
18.     });
19.     </script>

 

 

html 공통적인 부분

 

1. <div>
2.   <ul>
3.     <li class="menu"> <a><img src="" alt="메뉴1"/></a>
4.       <ul class="hide">
5.         <li>메뉴1-1</li>
6.         <li>메뉴1-2</li>
7.         <li>메뉴1-3</li>
8.       </ul>
9.     </li>
10.     <li class="menu"> <a><img src="" alt="메뉴2"/></a>
11.       <ul class="hide">
12.         <li>메뉴2-1</li>
13.         <li>메뉴2-2</li>
14.         <li>메뉴2-3</li>
15.       </ul>
16.     </li>
17.   </ul>
18. </div>