jquery实现漂亮的二级下拉菜单代码
发布网友
发布时间：2022-04-26 19:50
共1个回答
热心网友
时间：2022-04-09 14:12
这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了
先来看看运行效果：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/
具体代码如下：
<!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>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>jQuery二级菜单</title>
<script
type="text/javascript"
src="jquery-1.6.2.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav
li
span").click(function()
{
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function()
{
},
function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function()
{
$(this).addClass("subhover");
},
function(){
$(this).removeClass("subhover");
});
});
</script>
<style
type="text/css">
body
{
margin:
0;
padding:
0;
font:
10px
normal
Arial,
Helvetica,
sans-serif;
background:
#ddd
url(images/body_bg.gif)
repeat-x;
}
.container
{
width:
960px;
margin:
0
auto;
position:
relative;
}
#header
{
padding-top:
120px;
}
#header
.disclaimer
{
color:
#999;
padding:
100px
0
7px
0;
text-align:
right;
display:
block;
position:
absolute;
top:
0;
right:
0;
}
#header
.disclaimer
a
{
color:
#ccc;}
ul.topnav
{
list-style:
none;
padding:
0
20px;
margin:
0;
float:
left;
width:
920px;
background:
#222;
font-size:
1.2em;
background:
url(images/topnav_bg.gif)
repeat-x;
}
ul.topnav
li
{
float:
left;
margin:
0;
padding:
0
15px
0
0;
position:
relative;
}
ul.topnav
li
a{
padding:
10px
5px;
color:
#fff;
display:
block;
text-decoration:
none;
float:
left;
}
ul.topnav
li
a:hover{
background:
url(images/topnav_hover.gif)
no-repeat
center
top;
}
ul.topnav
li
span
{
width:
17px;
height:
35px;
float:
left;
background:
url(images/subnav_btn.gif)
no-repeat
center
top;
}
ul.topnav
li
span.subhover
{background-position:
center
bottom;
cursor:
pointer;}
ul.topnav
li
ul.subnav
{
list-style:
none;
position:
absolute;
left:
0;
top:
35px;
background:
#333;
margin:
0;
padding:
0;
display:
none;
float:
left;
width:
170px;
-moz-border-radius-bottomleft:
5px;
-moz-border-radius-bottomright:
5px;
-webkit-border-bottom-left-radius:
5px;
-webkit-border-bottom-right-radius:
5px;
border:
1px
solid
#111;
}
ul.topnav
li
ul.subnav
li{
margin:
0;
padding:
0;
border-top:
1px
solid
#252525;
border-bottom:
1px
solid
#444;
clear:
both;
width:
170px;
}
html
ul.topnav
li
ul.subnav
li
a
{
float:
left;
width:
145px;
background:
#333
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
padding-left:
20px;
}
html
ul.topnav
li
ul.subnav
li
a:hover
{
background:
#222
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
}
#header
img
{
margin:
20px
0
10px;
}
</style>
</head>
<body>
<div
class="container">
<div
id="header">
<ul
class="topnav">
<li><a
href="#">网站首页</a></li>
<li>
<a
href="#">网页菜单</a>
<ul
class="subnav">
<li><a
href="#">ASP导航</a></li>
<li><a
href="#">JSP导航</a></li>
<li><a
href="#">ASP.net导航</a></li>
<li><a
href="#">PHP导航</a></li>
</ul>
</li>
<li>
<a
href="#">网页特效</a>
<ul
class="subnav">
<li><a
href="#">层和菜单</a></li>
<li><a
href="#">鼠标特效</a></li>
<li><a
href="#">表单特效</a></li>
<li><a
href="#">表格特效</a></li>
<li><a
href="#">CSS特效</a></li>
<li><a
href="#">jQuery特效</a></li>
</ul>
</li>
<li><a
href="#">搜索引擎</a></li>
<li><a
href="#">博客营销</a></li>
<li><a
href="#">联系我们</a></li>
</ul>
</div>
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
