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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
jquery的map与get方法详解
Nov 04 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
javascript元素动态创建实现方法
May 13 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
js实现3D旋转效果
Aug 18 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
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
微信小程序网络封装(简单高效)
2018/08/06 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python 深入理解yield
2008/09/06 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python实现的RSS阅读器实例
2015/07/25 Python
实例介绍Python中整型
2019/02/11 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python eval函数原理及用法解析
2020/11/14 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
双十佳事迹材料
2014/01/29 职场文书
电子信息专业自荐书
2014/02/04 职场文书
保险专业求职信
2014/07/07 职场文书
出差报告怎么写
2014/11/06 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
MySQL 逻辑备份 into outfile
2022/05/15 MySQL