티스토리 뷰

Developer

[Jqeury] 슬라이딩 메뉴

rocksea 2012. 11. 23. 12:00

Jquery를 이용한 간단한 슬라이딩 메뉴소스를 소개합니다.

 

<style type="text/css">
 .menu a{cursor:pointer;}   
 .menu .hide{display:none; background-color:#FF9900}
</style>

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">   
// html dom 이 다 로딩된 후 실행.   
$(document).ready(function(){       
 // menu의 a tag mouse over
 $(".menu>a").mouseover(function(){           
  var submenu = $(this).next("ul");            
  // submenu 가 화면상에 보일때는 위로 접고 아닐시 아래로 펼치기           
  if( submenu.is(":visible") ){               
   submenu.slideUp();           
  }else{               
   submenu.slideDown();           
  }       
 });   
});
</script>
 </head>

 <body>
  <div>
        <ul>
                <li class="menu">
                        <a><img src="" alt="메뉴1"/></a>
                        <ul class="hide">
                                <li>메뉴1</li>
                                <li>메뉴2</li>
                                <li>메뉴3</li>
                                <li>메뉴4</li>
                                <li>메뉴5</li>
                        </ul>

                </li>
                <li class="menu">
                        <a><img src="" alt="메뉴2"/></a>
                        <ul class="hide">
                                <li>메뉴1</li>
                                <li>메뉴2</li>
                                <li>메뉴3</li>
                                <li>메뉴4</li>
                                <li>메뉴5</li>
                        </ul>
                </li>
        </ul>
</div>
</body>
</html>

 

부드러운 슬라이딩 매뉴 완성.

'Developer' 카테고리의 다른 글

[github] github 사용법.  (3) 2012.11.27
[DropBox] 설치 및 사용법  (5) 2012.11.26
Mongo userid Authentication  (0) 2012.11.16
mongodump 사용법 ( db backup )  (0) 2012.11.16
MongoDB connection pooling  (0) 2012.11.15
댓글