技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
jquery+自定义菜单 级别/可定义到无限级
在网上也许你找("无限级菜单下拉"关键词)的五花八门.各种各样,今天我花点时间写一个给大家参考.也许对你有点作用;
难度不是很高,很简单易用.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu limit</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#info_menu li').hover(function(){
$(this).children('ul').css({'display':'block'});
},function(){
$(this).children('ul').css({'display':'none'});
});
})
//]]>
</script>
<style type="text/css">
body{
font:400 11px/16px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
ul,li{
margin:0;
padding:0;
}
.info_menu {
height:29px;
position:relative;
width:394px;
}
.info_menu li {
background:url("http://media101.wanmei.com/images/xlzj/201008/cb2_main/bg_select_box.jpg") no-repeat scroll left top transparent;
display:inline;
float:left;
margin:8px 12px 0 2px;
position:relative;
width:84px;
}
.info_menu li.no_select {
background:none repeat scroll 0 0 #31201A;
border:1px solid #906B65;
height:19px;
width:82px;
}
.info_menu li a {
color:#FFE59E;
display:block;
height:21px;
line-height:21px;
padding-left:10px;
text-align:left;
}
.info_menu li a:hover {
text-decoration:none;
}
.info_menu li.no_select a {
color:#FFE59E;
display:block;
height:19px;
line-height:19px;
padding-left:10px;
text-align:left;
}
.info_menu li.no_select a:hover {
background:none repeat scroll 0 0 #E7C19F;
color:#924C00;
}
.info_menu li ul {
background:none repeat scroll 0 0 #31201A;
border:1px solid #906B65;
display:none;
position:absolute;
width:82px;
z-index:400;
}
.info_menu li ul li {
background-image:none;
margin:0;
padding:0;
text-align:center;
width:82px;
z-index:300;
}
.info_menu li ul li a {
color:#FFE59E;
display:block;
height:21px;
line-height:21px;
padding-left:5px;
text-align:left;
}
.info_menu li ul li a:hover {
background:none repeat scroll 0 0 #E7C19F;
color:#924C00;
}
.info_menu li a.arrow {
background:url("http://media101.wanmei.com/images/xlzj/201008/cb2_main/dot_06.gif") no-repeat scroll 66px 6px transparent;
}
.info_menu li a.arrow:hover {
background:url("http://media101.wanmei.com/images/xlzj/201008/cb2_main/dot_06.gif") no-repeat scroll 66px 6px #E7C19F;
color:#924C00;
}
.secondary-menu {
left:0;
top:20px;
}
.secondary-menu a {
text-decoration:none !important;
}
.third-menu {
left:82px;
top:-1px;
}
</style>
<body>
<div class="info_menu" id="info_menu">
<ul class="first_menu">
<li>
<a href="#">first menu</a>
<ul class="secondary-menu">
<li>
<a href="#" class="arrow">secondary</a>
<ul class="third-menu">
<li><a href="#" class="arrow">third </a>
<ul class="third-menu">
<li><a href="#" class="arrow">third </a></li>
<li><a href="#" class="arrow">third </a></li>
</ul>
</li>
<li><a href="#" class="arrow">third </a>
<ul class="third-menu">
<li><a href="#" class="arrow">third </a></li>
<li><a href="#" class="arrow">third </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">secondary </a></li>
</ul>
</li>
<!--<li><a href="#">first menu</a></li>
<li><a href="#">first menu</a></li>-->
</ul>
</div>
</body>
</html>