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

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

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<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实现淡入淡出二级下拉导航菜单的方法的更多相关文章

  1. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  2. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  3. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  4. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  5. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  6. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  7. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  8. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  9. Web前端开发实战2：二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

随机推荐

  1. PHP项目的“苦逼”经历与思考

    PHP项目的"苦逼"经历与思考 PHP零基础.但因为项目人手不够的原因,被安排到一个用户"定制"项目. 该项目是用PHP生成的统计数据报表. 而用户又有新的3个 ...

  2. 【bat】通过for循环复制一张图片100次

    代码如下: @echo off set "F=1" cd C:\Users\Thinkpad\Desktop\img for /L %%F IN (1,1,100) DO COPY ...

  3. 【Linux】rmdir命令

    用途 rmdir用于删除空目录 全称 rmdir的全称是:Remove Directory 参数 -p:连同上层空的目录一起删除 案例 现在有文件结构如下 test3 文件夹为空文件夹 test/te ...

  4. CSerialPort串口类最新修正版(解决关闭死锁问题)2014-01-11

    这是一份优秀的类文件,好多的地方值得我们学习,具体在多线程,事件,自定义消息,类的封装方面等等.Remon提供的串口类网址为:http://codeguru.earthweb.com/network/ ...

  5. Java泛型入门

      Java泛型入门 在学习本章之前,须要对Java的集合(Collection.Map)有一定的基础. Java集合有一个缺点.就是把一个对象"丢进"集合里后,集合就会&qu ...

  6. 【laravel54】win系下本地域名配置（解决403错误）

    1.apache虚拟目录地址应该指向\laravel54\public 目录下:(TP5类似) <VirtualHost *:> DocumentRoot "D:\phpStud ...

  7. SyntaxError: Non-ASCII character '\xe5' in file index.py on line 6, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details

    python入门,hhh 在慕课网上学习python入门,编写汉诺塔的递归调用时,代码正确.但是加上注释后编译不通过 报如下错误: SyntaxError: Non-ASCII character , ...

  8. （一）maven之——maven基础及本地仓库的配置

    一.初步了解maven Apache Maven是一个软件项目管理的综合工具.基于项目对象模型(POM)的概念,提供了帮助管理构建.文档.报告.依赖.发布等方法,Maven简化和标准化项目建设过程.处 ...

  9. Android 5.0最应该实现的8个期望

    毫无疑问,Android 5 将是令人兴奋的操作系统,因为 Android4.0 至 4.4 版本之间并没有显著的差异,显然谷歌会在 5.0 版本中进行一些较大幅度的革新.那么,代号为“柠檬芝士蛋糕” ...

  10. Ｃ# 基础: new 和 overrider 的区别

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...