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获得CheckBoxList选中的数量
Oct 27 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
Vue仿支付宝支付功能
May 25 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
JavaScript中变量提升机制示例详解
Dec 27 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 加密解密内部算法
2010/04/22 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python生成器用法实例详解
2019/11/22 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
css3 transform属性详解
2014/09/30 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
出纳担保书范文
2014/04/02 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
2016年教师节慰问信
2015/12/01 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
MySQL限制查询和数据排序介绍
2022/03/25 MySQL