用jquery实现下拉菜单效果的代码


Posted in Javascript onJuly 25, 2010

效果如下:
用jquery实现下拉菜单效果的代码
这是菜单的内容,用ul标签实现菜单:

<div id="menu"> 
<ul> 
<li><a href="">菜单一</a> 
<ul> 
<li><a href="">子菜单1</a></li> 
<li><a href="">子菜单2</a> 
<ul><li><a href="">子菜单7</a></li></ul> 
</li> 
<li><a href="">子菜单3</a></li> 
</ul> 
</li> 
<li><a href="">菜单二</a> 
<ul> 
<li><a href="">子菜单4</a></li> 
<li><a href="">子菜单5</a></li> 
<li><a href="">子菜单6</a></li> 
</ul> 
</li> 
</ul> 
</div>

这是CSS控制代码:
ul,ol,li{list-style:none;padding:0px;margin:0px;} 
#menu *{line-height:30px;} 
#menu a{ 
text-decoration:none; 
display:block; 
} 
#menu ul{ 
text-align:left; 
background:#333; 
} 
#menu .arrow{ /* 菜单项的右侧小箭头 */ 
float:right; 
padding-right:5px; 
} 
#menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */ 
/* 一级菜单 */ 
#menu>ul>li{ 
text-align:center; 
display:inline-block; 
width:80px; 
} 
#menu>ul>li>a{color:#fff;} 
#menu>ul>li:hover{background:#666;} 
/* 下拉的菜单栏 */ 
#menu>ul>li ul{ 
display:none; 
width:150px; 
position:absolute; 
background:#c1cd94; 
box-shadow:2px 2px 2px #000; 
-webkit-box-shadow:2px 2px 2px #000; 
-moz-box-shadow:2px 2px 2px #123; 
} 
/* 下拉菜单的菜单项 */ 
#menu>ul>li>ul li{padding-left:5px; position:relative;} 
#menu>ul>li>ul li>a{color:#000;} 
#menu>ul>li>ul li:hover{background:#d3dbb3;} 
/* 三级及以下的菜单项的定位 */ 
#menu>ul>li>ul>li ul{left:150px; top:0px;} 
[html] 
这是JS的控制代码: 
[code] 
$(document).ready(function() 
{ 
/* 菜单初始化 */ 
$('#menu>ul>li>ul').find('li:has(ul:not(:empty))>a').append("<span class='arrow'>></span>"); // 为有子菜单的菜单项添加'>'符号 
$("#menu>ul>li").bind('mouseover',function() // 顶级菜单项的鼠标移入操作 
{ 
$(this).children('ul').slideDown('fast'); 
}).bind('mouseleave',function() // 顶级菜单项的鼠标移出操作 
{ 
$(this).children('ul').slideUp('fast'); 
}); 
$('#menu>ul>li>ul li').bind('mouseover',function() // 子菜单的鼠标移入操作 
{ 
$(this).children('ul').slideDown('fast'); 
}).bind('mouseleave',function() // 子菜单的鼠标移出操作 
{ 
$(this).children('ul').slideUp('fast'); 
}); 
});

出处:http://www.caixw.com/archives/drop-down-menu-with-jquery.html
Javascript 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
关于AOP在JS中的实现与应用详解
May 06 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 #Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 #Javascript
来自qq的javascript面试题
Jul 24 #Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 #Javascript
js获取元素在浏览器中的绝对位置
Jul 24 #Javascript
几个有趣的Javascript Hack
Jul 24 #Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 #Javascript
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php 过滤器实现代码
2010/08/09 PHP
PHP header函数分析详解
2011/08/06 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python网络编程之五子棋游戏
2020/05/14 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python Tornado框架的使用示例
2020/10/19 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
网络编辑岗位职责
2014/03/18 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
促销活动总结范文
2014/04/30 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
python tkinter模块的简单使用
2021/04/07 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
浅谈Python中对象是如何被调用的
2022/04/06 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android