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


Posted in Javascript onMarch 22, 2013

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说,
效果图如下,欢迎评价:
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>
Javascript 相关文章推荐
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 #Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 #Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 #Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 #Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 #Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 #Javascript
jquery文字上下滚动的实现方法
Mar 22 #Javascript
You might like
PHP的面向对象编程
2006/10/09 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
快速入手Python字符编码
2016/08/03 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python getopt模块使用实例解析
2019/12/18 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
Why do we need Unit test
2013/01/03 面试题
应用心理学专业求职信
2014/08/04 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server