[Jqeury] 슬라이딩 메뉴
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>
부드러운 슬라이딩 매뉴 완성.