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 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
限制只能输入数字的实现代码
May 16 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
详解vue更改头像功能实现
Apr 28 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
js实现简单的倒计时
2021/01/28 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
python中pivot()函数基础知识点
2021/01/03 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
自我评价的正确写法
2013/09/19 职场文书
职业生涯规划书范文
2014/03/10 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
服装设计专业自荐信
2014/06/17 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android