jquery实现多级下拉菜单的实例代码


Posted in Javascript onOctober 02, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery实现多级下拉菜单-柯乐义</title>
<style>
/* navigation style */
#keleyi-com-nav{
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #2D2D2D;
border: 1px solid #323232;    
border-radius: 3px;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
}    
#keleyi-com-nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
border-right: 1px solid #323232;
}
#keleyi-com-nav li a{
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #636161;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#keleyi-com-nav ul{
background: #f2f5f6; 
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:170px;
}
#keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{
padding-left: 10px;
padding-right: 10px;
color: #FFF;
background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px;
width: 160px;
}
#keleyi-com-nav .site-name a{
width: 129px;
overflow:hidden;
}
#keleyi-com-nav li.facebook{
background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px;
}
#keleyi-com-nav li.facebook:hover {
background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101;
}
#keleyi-com-nav li.yahoo{
background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px;
}
#keleyi-com-nav li.yahoo:hover {
background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101;
}

#keleyi-com-nav li:hover{
background: #010101;
}
#keleyi-com-nav li a{
display: block;
}
#keleyi-com-nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:170px;
height:39px;
}
#keleyi-com-nav ul li a {
border-right: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#keleyi-com-nav ul li:hover{background:#DFEEF0;}
#keleyi-com-nav ul li:last-child { border-bottom: none;}
#keleyi-com-nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#keleyi-com-nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
/* Third-level menus */
#keleyi-com-nav ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#keleyi-com-nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
#keleyi-com-nav ul li{
display: block;
visibility:visible;
}
#keleyi-com-nav li:hover > ul{
display: block;
visibility:visible;
}
</style>
<!--[if IE 7]>
<style>
#keleyi-com-nav{
margin-left:0px
}
#keleyi-com-nav ul{
left:-40px;
}
#keleyi-com-nav ul ul{
left:130px;
}
#keleyi-com-nav ul ul ul{
left:130px;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#kel"+"eyi-com-nav li").hover(
function () {
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
});
});
</script>
</head>
<body>
<ul id="keleyi-com-nav">
<li class="site-name"><a href="http://keleyi.com"> </a></li>
<li class="yahoo"><a href="http://keleyi.com">导航菜单</a>
<ul>
<li><a href="http://keleyi.com/a/bjac/veugsmw9.htm">导航菜单二级分类 »</a> 
<ul>
<li><a href="http://keleyi.com">1</a></li>
<li><a href="http://keleyi.com/a/bjac/r55i6646.htm">2</a></li>
<li><a href="http://keleyi.com">3</a></li>
<li><a href="http://keleyi.com">导航菜单三 »</a>
<ul>
<li><a href="http://keleyi.com">导航菜单4</a></li>
<li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm">1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://keleyi.com">1</a></li>
<li><a href="http://keleyi.com">2</a></li>
</ul>
</li> 
<li class="facebook"><a href="http://keleyi.com">翻页</a>
<ul>
<li><a href="http://keleyi.com">1</a></li>
<li><a href="http://keleyi.com">2</a></li>
</ul>
</li>
</ul>
</body>
</html>
Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jQuery动画与特效详解
Feb 01 Javascript
Java中Timer的用法详解
Oct 21 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
基于JQuery的列表拖动排序实现代码
Oct 01 #Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 #Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 #Javascript
javascript不可用的问题探究
Oct 01 #Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 #Javascript
js有序数组的连接问题
Oct 01 #Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 #Javascript
You might like
php使用递归计算文件夹大小
2014/12/24 PHP
详解YII关联查询
2016/01/10 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python opencv读mp4视频的实例
2018/12/07 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
文明学生事迹材料
2014/01/29 职场文书
部队万能检讨书
2014/02/20 职场文书
授权收款委托书
2014/09/23 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python 中random 库的详细使用
2021/06/03 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript