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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
EsLint入门学习教程
Feb 17 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
基于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 购物车的例子
2009/05/04 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python实现简单遗传算法
2018/03/19 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
在python中使用nohup命令说明
2020/04/16 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
标准自荐信范文
2014/01/29 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
一文搞懂python异常处理、模块与包
2021/06/26 Python
Apache自带的ab压力测试工具的实现
2022/07/23 Servers