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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
再论Javascript的类继承
Mar 05 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP中对数据库操作的封装
2006/10/09 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php导出excel格式数据问题
2014/03/11 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
让您的菜单不离网站
2006/10/03 Javascript
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
移动端js图片查看器
2016/11/17 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
python逐行读取文件内容的三种方法
2014/01/20 Python
Python中自定义函数的教程
2015/04/27 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python字符串的一些操作方法总结
2019/06/10 Python
详解Python3定时器任务代码
2019/09/23 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
捐书活动总结
2014/05/04 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
北京爱情故事观后感
2015/06/12 职场文书
何玥事迹观后感
2015/06/16 职场文书
工作服管理制度范本
2015/08/06 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB