728x90
반응형
간단한 드롭다운 메뉴입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
2. CSS
ul, li { list-style: none; }
3. HTML
<ul>
<li class="menu"><a href="#">Months</a></li>
<li class="submenu">
<ul>
<li><a href="#">January</a></li>
<li><a href="#">February</a></li>
<li><a href="#">March</a></li>
</ul>
</li>
<li class="menu"><a href="#">Weeks</a></li>
<li class="submenu">
<ul>
<li><a href="#">Monday</a></li>
<li><a href="#">Tuesday</a></li>
<li><a href="#">Wednesday</a></li>
</ul>
</li>
</ul>
4. Script
<script type="text/javascript">
$(document).ready(function(){
$(".submenu").hide();
$(".menu").click(function () {
$(".submenu").slideUp();
$(this).next(".submenu").slideDown();
return false;
})
});
</script>
728x90
