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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
简单了解vue 插值表达式Mustache
Jul 22 Javascript
Vue实现简单的留言板
Oct 23 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
在Python中移动目录结构的方法
2016/01/31 Python
python使用生成器实现可迭代对象
2018/03/20 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
小学教师听课制度
2014/02/01 职场文书
实习生求职自荐信
2014/02/07 职场文书
六一节目主持词
2014/04/01 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫