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 相关文章推荐
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
详解JavaScript中的this指向问题
Feb 05 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设置允许大文件上传示例代码
2014/03/10 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
20行python代码实现人脸识别
2019/05/05 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python实现按行分割文件
2019/07/22 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
敬老院标语
2014/06/27 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
普通党员个人整改措施
2014/10/27 职场文书
大学辅导员述职报告
2015/01/10 职场文书
安全承诺书
2015/01/19 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
创业计划书之面包店
2019/09/17 职场文书
JS数组去重详情
2021/11/07 Javascript
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
SpringBoot详解执行过程
2022/07/15 Java/Android