jQuery ul标签下拉菜单演示代码


Posted in Javascript onDecember 11, 2010

这是菜单的内容,用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;}

这是JS的控制代码:
$(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'); 
}); 
});
Javascript 相关文章推荐
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
javascript时间差插件分享
Jul 18 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
switchery按钮的使用方法
Dec 18 Javascript
javascript中的隐式调用
Feb 10 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 #Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 #Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 #Javascript
基于jQuery的history历史记录插件
Dec 11 #Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 #Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 #Javascript
为超链接加上disabled后的故事
Dec 10 #Javascript
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP count()函数讲解
2019/02/03 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
在python中安装basemap的教程
2018/09/20 Python
python实现键盘控制鼠标移动
2020/11/27 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
三查三看党性分析材料
2014/02/18 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
社团活动总结
2014/04/28 职场文书
工商干部先进事迹
2014/05/14 职场文书
品酒会策划方案
2014/05/26 职场文书
土木工程求职信
2014/05/29 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js