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 图片预览效果 推荐
Dec 22 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
JavaScript反射与依赖注入实例详解
May 29 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
基于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编程最快明白》第三讲:php数组
2010/11/01 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
vue组件学习教程
2017/09/09 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python批量赋值操作实例
2018/10/22 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python基于SMTP协议发送邮件
2019/05/31 Python
用Python写一个自动木马程序
2019/09/17 Python
python Pexpect模块的使用
2020/12/25 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
工作中个人的自我评价
2013/12/31 职场文书
干部行政关系介绍信
2014/01/17 职场文书
植树造林的宣传标语
2014/06/23 职场文书
商业门面租房协议书
2014/11/25 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书