Jquery实现带动画效果的经典二级导航菜单

更新时间：2013年03月22日 17:06:47 作者：

导航菜单在网页中呈现的频率还是比较多的，因为效果相当不错,接下来为大家介绍下使用jquery实现经典二级导航菜单，各位童鞋们快来围观哦

导航菜单比较实用，当然还是选择经典的，代码最少的，效果最好的喽，各位童鞋请围观哦，废话不说，
效果图如下，欢迎评价：

看代码：

 
<!DOCTYPE html > 
<html> 
<head> 
<title>一款带动画效果的经典二级导航菜单Jquery特效</title> 
<meta name="author" content="Jquery" /> 
<meta name="keywords" content="Jquery,Jquery资源,前端设计,div+css" /> 
<style> 
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;} 
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;} 
ul,li {list-style-type:none; text-transform:capitalize;} 
clear{clear:both;height:0;font-size: 1px;line-height: 0px;}//清除浮动哦 
/*menu*/ 
#nav {margin:0 auto 60px; width:1080px; display:block;} 
mainlevel {background:#ffe60c; float:left; border-right:1px solid #fff; width:140px;} 
mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px; font-weight:bold;} 
mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 0 0; font-weight:bold;} 
mainlevel ul {display:none; position:absolute;} 
mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;font-weight:bold;} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript" > 
$(function(){ 
$('li.mainlevel').hover(function(){ 
$(this).find('ul').slideDown(500);//鼠标滑过找到当前的UL，向下滑出显示子菜单 
},function(){ 
$(this).find('ul').stop(true,false).slideUp("fast"); 
}); 
}); 
</script> 
</head> 
<body> 
<ul id="nav"> 
<li class="mainlevel"><a href="http://www.875.cn/" target="_blank">Jquery插件</a> 
<ul > 
<li><a href="http://www.875.cn/" target="_blank">JavaScript</a></li> 
<li><a href="http://www.875.cn/" target="_blank">jQuery</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideUp</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideDown</a></li> 
<li><a href="http://www.875.cn/" target="_blank">up and down</a></li> 
<li><a href="http://www.875.cn/" target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel"><a href="http://www.875.cn/" target="_blank">Jquery资源</a> 
<ul> 
<li><a href="http://www.875.cn/" target="_blank">JavaScript</a></li> 
<li><a href="http://www.875.cn/" target="_blank">jQuery</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideUp</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideDown</a></li> 
<li><a href="http://www.875.cn/" target="_blank">up and down</a></li> 
<li><a href="http://www.875.cn/" target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel"><a href="http://www.875.cn/" target="_blank">Jquery特效</a> 
<ul id="sub_03"> 
<li><a href="http://www.875.cn/" target="_blank">JavaScript</a></li> 
<li><a href="http://www.875.cn/" target="_blank">jQuery</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideUp</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideDown</a></li> 
<li><a href="http://www.875.cn/" target="_blank">up and down</a></li> 
<li><a href="http://www.875.cn/" target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel" ><a href="http://www.875.cn/" target="_blank">Jquery学堂</a> 
<ul > 
<li><a href="http://www.875.cn/" target="_blank">JavaScript</a></li> 
<li><a href="http://www.875.cn/" target="_blank">jQuery</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideUp</a></li> 
<li><a href="http://www.875.cn/" target="_blank">slideDown</a></li> 
<li><a href="http://www.875.cn/" target="_blank">up and down</a></li> 
<li><a href="http://www.875.cn/" target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel" ><a href="http://www.875.cn/" target="_blank">分享快乐</a> 
<ul > 
<li><a href="http://www.nifengla.com/" target="_blank">JavaScript</a></li> 
<li><a href="http://www.nifengla.com/" target="_blank">jQuery</a></li> 
<li><a href="http://www.nifengla.com/" target="_blank">slideUp</a></li> 
<li><a href="http://www.nifengla.com/" target="_blank">slideDown</a></li> 
<li><a href="http://www.nifengla.com/" target="_blank">up and down</a></li> 
<li><a href="http://www.nifengla.com/" target="_blank">animate</a></li> 
</ul> 
</li> 
<div class="clear"></div> 
</ul> 
</body> 
</html> 

您可能感兴趣的文章:

jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
这篇文章主要给大家介绍了关于jQuery实现分页功能的相关资料，主要包含ajax请求和后台数据，文末给出了完整的demo示例，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
jQuery中的关系查找方法
这篇文章主要介绍了jQuery中的关系查找方法，关系查找方法分有children()子级、siblings()兄弟的一些方式，下文都有介绍到，文章内容介绍详细，需要的小伙伴可以参考一下，希望对你的学习有所帮助
2022-03-03
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
这篇文章主要介绍了自定义类似于jQuery UI Selectable 的Vue指令v-selectable的相关资料,需要的朋友可以参考下
2017-08-08
jQuery实现点击下拉框中的值累加到文本框中的方法示例
这篇文章主要介绍了jQuery实现点击下拉框中的值累加到文本框中的方法,涉及jQuery事件绑定及页面元素属性动态获取与操作相关实现技巧,需要的朋友可以参考下
2017-10-10
基于Jquery实现表单验证
本文给大家分享的是一段基于Jquery实现表单验证的代码，非常简单实用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-08-08
jquery 图片缩放拖动的简单实例
本篇文章只要是对jquery 图片缩放拖动的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
解决jQuery动态获取手机屏幕高和宽的问题
这篇文章主要介绍了如何解决jQuery动态获取手机屏幕高和宽的问题,需要的朋友可以参考下
2014-05-05
jQuery中 prop() attr()使用详解
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？关于它们两个的区别，这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
2015-05-05
jquery 使用点滴函数代码
简单的按钮js事件用于判断和显示提示
2011-05-05
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
这篇文章主要介绍了jQuery实现鼠标跟随提示层效果代码,具备显示文本,Div,Table,Html等功能.涉及jQuery针对鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
2016-04-04