jquery二级下拉多级菜单效果代码
代码语言：html
所属分类：菜单导航
代码描述：jquery二级下拉多级菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#EEEEEE;}
a{outline:none;}
a:link{color:#434343;text-decoration:none;}
a:visited{color:#838383;text-decoration:none;}
a:hover{color:#CC0000;text-decoration:none;}
/* ------------------------------
* wrap-nav
* ------------------------------ */
#wrap-nav, #wrap-nav li, #wrap-nav h3, #wrap-nav h3 a{background:url("//repo.bfw.wiki/bfwrepo/image/605ac931377aa.png") no-repeat scroll left -9999px;}
#wrap-nav{height:40px;line-height:40px;background-repeat:repeat-x;background-position:0 0;background-color:#CC0000;width:960px;margin:40px auto 0 auto;}
#wrap-nav ul.menu li{position:relative;float:left;padding:0 5px;background-position:0 -40px;}
#wrap-nav ul.menu li h3{padding:0 15px 0 0;font-size:1.2em;}
#wrap-nav ul.menu li h3 a.depth_1{padding:0 0 0 15px;display:inline-block;color:#FFFFFF;}
#wrap-nav ul.menu li h3.hover,
#wrap-nav ul.menu li h3.selected{background-position:right -80px;}
#wrap-nav ul.menu li h3.hover a.depth_1,
#wrap-nav ul.menu li h3.selected a.depth_1{background-position:left -80px;color:#CC0000;}
#wrap-nav ul.menu li.hover h3{background-position:right -120px;}
#wrap-nav ul.menu li.hover h3 a.depth_1{background-position:left -120px;color:#CC0000;}
#wrap-nav ul.menu li ul.children{position:absolute;left:2px;top:40px;z-index:19;display:none;width:393px;padding:6px 7px 5px 6px;border:3px solid #990000;border-top:0px;background:#FFFFFF;}
#wrap-nav ul.menu li ul.children li{width:393px;padding:0 0 1px 0;background:none;}
#wrap-nav ul.menu li ul.children li.nosub{width:130px;overflow:hidden;}
#wrap-nav ul.menu li ul.children li h3{}
#wrap-nav ul.menu li ul.children li h3 a.depth_2{width:120px;line-height:25px;display:block;font-weight:normal;font-size:9pt;color:#900;}
#wrap-nav ul.menu li ul.children li h3 a.depth_2 span.icon10{margin:10px 3px 0 5px;background-position:-60px -380px;}
#wrap-nav ul.menu li ul.children li h3.selected{background:#FFEFEF;}
#wrap-nav ul.menu li ul.children li.hover{z-index:20;}
#wrap-nav ul.menu li ul.children li.hover h3 a.depth_2{background:#FFCFCF;font-weight:bold;}
#wrap-nav ul.menu li ul.children li.hover ul{background:#FFEFEF;border-color:#FFBFBF;height:auto;z-index:20;}
#wrap-nav ul.menu li ul.children li.hover ul li a.depth_3{color:#333;}
#wrap-nav ul.menu li ul.children li.hover ul li a.depth_3:hover{color:#900;}
#wrap-nav ul.menu li ul.children ul{position:absolute;top:0;left:120px;padding:0 0 0 10px;width:263px;height:25px;overflow:hidden;background:#F4F8F9;border-left:2px solid #D8E2EC;}
#wrap-nav ul.menu li ul.children ul li{width:auto;padding:0;float:left;}
#wrap-nav ul.menu li ul.children ul li a.depth_3{margin:0 15px 0 0;line-height:25px;display:block;color:#666;white-space:nowrap;}
#wrap-nav ul.menu li ul.children ul li a.depth_3:hover{text-decoration:underline;}
#wrap-nav ul.menu li ul.children ul li a.selected{background:none;color:#900;}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var navstr = '';
for (c in vars = '0'.split(',')) {
$('#menu_' + vars[c]).addClass('selected');
}
$('#wrap-nav ul.menu > li').hover(function() {
$(this).find('.children').show();
if ($(this).find('.children').length) $(this).addClass('hover');
},function() {
$('.children').hide();
$(this).removeClass('hover');
});
$('#wrap-nav ul.menu h3, #wrap-nav ul.menu ul.children > li, #wrap-cats h3').hover(function() {
$(this).addClass('hover');
},function() {
$(this).removeClass('hover');
});
});
</script>
</head>
<body>
<div id="wrap-nav">
<ul class="menu ul">
<li><h3 class="selected"><a href="#" class="depth_1">网站首页</a></h3></li>
<li>
<h3 id="menu_01"><a href="#" class="depth_1">设计素材</a></h3>
<ul id="children_01" class="children">
<li>
<h3 id="menu_01a"><a href="#" class="depth_2"><span class="icon10"></span>高清图片</a></h3>
<ul id="children_01a">
<li><a href="#" class="depth_3">创意</a></li>
<li><a href="#" class="depth_3">风景</a></li>
<li><a href="#" class="depth_3">物品</a></li>
<li><a href="#" class="depth_3">花卉</a></li>
<li><a href="#" class="depth_3">饮食</a></li>
<li><a href="#" class="depth_3">建筑/室内</a></li>
<li><a href="#" class="depth_3">旅行</a></li>
<li><a href="#" class="depth_3">人物</a></li>
<li><a href="#" class="depth_3">运动</a></li>
<li><a href="#" class="depth_3">生活</a></li>
<li><a href="#" class="depth_3">交通</a></li>
</ul>
</li>
<li>
<h3 id="menu_01b"><a href="#" class="depth_2"><span class="icon10"></span>矢量</a></h3>
<ul id="children_01b">
<li><a href="#" class="depth_3">潮流</a></li>
<li><a href="#" class="depth_3">传统</a></li>
<li><a href="#" class="depth_3">花纹</a></li>
<li><a href="#" class="depth_3">花边</a></li>
<li><a href="#" class="depth_3">图标</a></li>
<li><a href="#" class="depth_3">节庆</a></li>
<li><a href="#" class="depth_3">人物</a></li>
<li><a href="#" class="depth_3">运动</a></li>
</ul>
</li>
<li>
<h3 id="menu_01c"><a href="#" class="depth_2"><span class="icon10"></span>PSD分层</a></h3>
<ul id="children_01c">
<li><a href="#" class="depth_3">风景</a></li>
<li><a href="#" class="depth_3">金融</a></li>
<li><a href="#" class="depth_3">背景</a></li>
<li><a href="#" class="depth_3">植物</a></li>
<li><a href="#" class="depth_3">创意</a></li>
<li><a href="#" class="depth_3">潮流</a></li>
<li><a href="#" class="depth_3">卡通</a></li>
</ul>
</li>
<li>
<h3 id="menu_01d"><a href="#" class="depth_2"><span class="icon10"></span>图标</a></h3>
<ul id="children_01d">
<li><a href="#" class="depth_3">网页常用</a></li>
<li><a href="#" class="depth_3">交通/建筑</a></li>
<li><a href="#" class="depth_3">系统/软件</a></li>
<li><a href="#" class="depth_3">卡通/游戏</a></li>
<li><a href="#" class="depth_3">节庆</a></li>
<li><a href="#" class="depth_3">表情</a></li>
<li><a href="#" class=&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0