编程 Javascript

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 相关文章推荐

JQUERY CHECKBOX全选,取消全选,反选方法三

Aug 30 Javascript

JavaScript匿名函数与委托使用示例

Jul 22 Javascript

js仿百度登录页实现拖动窗口效果

Mar 11 Javascript

Javascript的表单验证-初识正则表达式

Mar 18 Javascript

javascript加载xml 并解析各节点的值(实现方法)

Oct 12 Javascript

BOM之navigator对象和用户代理检测

Feb 10 Javascript

详解在vue-cli项目中安装node-sass

Jun 21 Javascript

BACKBONE.JS 简单入门范例

Oct 17 Javascript

基于node简单实现RSA加解密的方法步骤

Mar 21 Javascript

Layui Table js 模拟选中checkbox的例子

Sep 03 Javascript

vue iview的菜单组件Mune 点击不高亮的解决方案

Nov 01 Javascript

nuxt 路由、过渡特效、中间件的实现代码

Nov 06 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