最近发现一个简单的jQuery下拉菜单,代码很少,很适合有基础的新手学习提高。
这是jQuery代码:
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav li span").click(function() {
$(this).parent().find("ul.subnav").slideDown('fast');
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){ //On Hover Out
$(this).removeClass("subhover");
});
});
</script>
下面是html代码:
<div id="header">
<ul class="topnav">
<li><a href="#">首页</a></li>
<li>
<a href="#">原创作品</a>
<ul class="subnav">
<li><a href="#">绘画艺术</a></li>
<li><a href="#">平面设计</a></li>
<li><a href="#">交互设计</a></li>
<li><a href="#">3D艺术</a></li>
<li><a href="#">摄影艺术</a></li>
<li><a href="#">其他艺术</a></li>
</ul>
</li>
<li>
<a href="#">设计素材</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">佳作欣赏</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">论坛</a></li>
<li><a href="#">网址导航</a></li>
</ul>
</div>
这是jQuery代码:
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav li span").click(function() {
$(this).parent().find("ul.subnav").slideDown('fast');
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){ //On Hover Out
$(this).removeClass("subhover");
});
});
</script>
下面是html代码:
<div id="header">
<ul class="topnav">
<li><a href="#">首页</a></li>
<li>
<a href="#">原创作品</a>
<ul class="subnav">
<li><a href="#">绘画艺术</a></li>
<li><a href="#">平面设计</a></li>
<li><a href="#">交互设计</a></li>
<li><a href="#">3D艺术</a></li>
<li><a href="#">摄影艺术</a></li>
<li><a href="#">其他艺术</a></li>
</ul>
</li>
<li>
<a href="#">设计素材</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">佳作欣赏</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">论坛</a></li>
<li><a href="#">网址导航</a></li>
</ul>
</div>