用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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
利用腾讯的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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP操作数组相关函数
2011/02/03 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
python创建文件时去掉非法字符的方法
2018/10/31 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
新浪微博实习心得体会
2014/01/27 职场文书
综合办公室岗位职责
2015/04/11 职场文书
创卫工作总结2015
2015/04/22 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Python上下文管理器Content Manager
2021/06/26 Python