jQuery实现淡入淡出二级下拉导航菜单的方法


Posted in Javascript onAugust 28, 2015

本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法。分享给大家供大家参考。具体如下:

这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变。

运行效果截图如下:

jQuery实现淡入淡出二级下拉导航菜单的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>渐隐渐现的二级竖向下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;}
ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;color:#000;}
#wrap{position:relative;top:0px;width:876px;height:34px;line-height:34px;margin:0 auto;}
ul#menu li{float:left;display:block;width:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;}
ul#menu li a:link{display:block;background:#EDEBEC;font-size:14px;color:#333;width:92px;height:37px;line-height:37px;}
ul#menu li a:hover,.red{background:#CE070E!important;color:#FFF!important;}
/*子菜单*/
ul#menu li ul{position:absolute;top:37px;width:90px;display:none;border:1px #CE070E solid;border-top:none;background:#FFF;}
ul#menu li ul li{float:left;}
ul#menu li ul li a:link{width:90px;height:37px;line-height:37px;background:#FFF;}
ul#menu li ul li a:hover{color:#CE070E;text-decoration:underline}
ul#menu li ul li{width:90px;height:37px;line-height:37px;float:left;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript"> 
$(function(){
 $("ul#menu>li:has(ul)").hover( 
 function(){ 
  $(this).children('a').addClass('red').end().find('ul').fadeIn(400);
 },
 function(){
  $(this).children('a').removeClass('red').end().find('ul').fadeOut(400);
 }
 );
});
</script>
</head>
<body>
<div id="wrap">
 <ul id="menu">
  <li><a href="#" >网站首页</a></li>
  <li><a href="#" >最新动态页</a>
   <ul>
    <li><a href="#">源码爱好者</a></li>
    <li><a href="#">编程导航</a></li>
    <li><a href="#">网页特效</a></li> 
   </ul>
  </li>
  <li><a href="#" >产品预定</a></li>
  <li><a href="#" >帮助查询</a>
   <ul>
    <li><a href="#">时速快递</a> | </li>
    <li><a href="#">太空一号</a> | </li>
    <li><a href="#">蜘蛛侠前传</a> | </li>
    <li><a href="#">未来战士</a> | </li>
    <li><a href="#">蟒蛇之灾</a></li> 
   </ul>
  </li>
  <li><a href="#" >会员俱乐部</a></li>
  <li><a href="#" >凯撒论坛</a></li>
 </ul> 
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 #Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 #Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 #Javascript
js实现简单折叠、展开菜单的方法
Aug 28 #Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 #Javascript
js实现超简单的展开、折叠目录代码
Aug 28 #Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 #Javascript
You might like
php遍历目录viewDir函数
2009/12/15 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python实现手机销售管理系统
2019/03/19 Python
python根据时间获取周数代码实例
2019/09/30 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
文明风采获奖感言
2014/02/18 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
杨善洲电影观后感
2015/06/04 职场文书
被委托人身份证明
2015/08/07 职场文书