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学习笔记4 Eval函数
Jan 11 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 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
77A一级收信机修理记
2021/03/02 无线电
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python yield使用方法示例
2013/12/04 Python
遗传算法之Python实现代码
2017/10/10 Python
Python下载网络小说实例代码
2018/02/03 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
python 的topk算法实例
2020/04/02 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
会计岗位职责
2015/02/03 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
职工宿舍管理制度
2015/08/05 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis