jquery实现鼠标滑过显示二级下拉菜单效果


Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果。分享给大家供大家参考。具体如下:

这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上。

运行效果截图如下:

jquery实现鼠标滑过显示二级下拉菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery下拉菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
.wrap { width: 800px; margin: 0 auto; }
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }
#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
* html #nav ul { margin: 0 0 0 -2px; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
</style>
</head>
<body>
<div class="wrap">
 <ul id="nav">
  <li><a href="#">网站主页</a></li>
  <li><a href="#">关于我</a>
   <ul>
    <li><a href="#">Company</a></li>
    <li><a href="#">Authors</a></li>
    <li><a href="#">Advertising</a></li>
   </ul>
  </li>
  <li><a href="#">RSS订阅</a>
   <ul>
    <li><a href="#">PSD</a></li>
    <li><a href="#">Patterns</a></li>
    <li><a href="#">Icons</a></li>
   </ul>   
  </li>
  <li><a href="#">精美博文</a>
   <ul>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">MySQL</a></li>
   </ul>
  </li>
  <li><a href="#">Web工具</a>
   <ul>
    <li><a href="#">Performance</a></li>
    <li><a href="#">CMS Plugins</a></li>
    <li><a href="#">Cheat Sheets</a></li>
   </ul>
  </li>
  <li><a href="#">Originals</a>
   <ul>
    <li><a href="#">Website Design</a></li>
    <li><a href="#">Mobile</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript">
$(document).ready(function() { 
 $('#nav li').hover(function() {
  $('ul', this).slideDown(200);
  $(this).children('a:first').addClass("hov");
 }, function() {
  $('ul', this).slideUp(100);
  $(this).children('a:first').removeClass("hov");  
 });
});
</script>
</body>
</html>

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

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
js实现简单数字变动效果
Nov 06 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 #Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 #Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 #Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 #Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
You might like
提升PHP速度全攻略
2006/10/09 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
取键盘键位ASCII码的网页
2007/07/30 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python socket模块方法实现详解
2019/11/05 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
详解python tcp编程
2020/08/24 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
优秀研究生主要事迹
2014/06/03 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫