您的位置：首页 > Web前端 > JQuery
jquery导航栏

2016-05-09 05:52 561 查看
<!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" />
<style>
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {
padding: 0;
margin: 0;
}

body {
font: 12px/normal Verdana, Arial, Helvetica, sans-serif;
}

ul, li {
list-style-type: none;
text-transform: capitalize;
}

.clear {
clear: both;
*display: inline; /*IE only*/
}

#nav {
margin: 0 auto 60px;
width: 1080px;
display: block;
}

#nav .jquery_out {
float: left;
line-height: 32px;
display: block;
border-right: 1px solid #fff;
text-align: center;
color: #fff;
font: 18px/32px;
background: #062723 url(images/slide-panel_03.png) 0 0 repeat-x;
}

#nav .jquery_out .smile {
padding-left: 1em;
}

#nav .jquery_inner {
margin-left: 16px;
}

#nav .jquery {
margin-right: 1px;
padding: 0 2em;
}

#nav .mainlevel {
background: #ffe60c;
float: left;
border-right: 1px solid #fff;
width: 140px; /*IE6 only*/
}

#nav .mainlevel a {
color: #000;
text-decoration: none;
line-height: 32px;
display: block;
padding: 0 20px;
width: 100px;
}

#nav .mainlevel a:hover {
color: #fff;
text-decoration: none;
background: #062723 url(images/slide-panel_03.png) 0 0 repeat-x;
}

#nav .mainlevel ul {
display: none;
position: absolute;
}

#nav .mainlevel li {
border-top: 1px solid #fff;
background: #ffe60c;
width: 140px; /*IE6 only*/
}

.log {
text-align: center;
color: skyblue;
line-height: 24px;
text-transform: capitalize;
margin: 50px auto;
}
</style>

<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li.mainlevel').mousemove(function () {
$(this).find('ul').slideDown();//you can give it a speed
});
$('li.mainlevel').mouseleave(function () {
$(this).find('ul').slideUp("fast");
});
});
</script>
<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br /><br /><br /><br /><br /><br />
<div id="menu">
<ul id="nav">
<li class="jquery_out">
<div class="jquery_inner">
<div class="jquery">
<span class="text">let'jquery</span><span class="smile">^_^</span>
</div>
</div>
</li>
<li class="mainlevel" id="mainlevel_01">
<a href="#" target="_blank">do touch me</a>
<ul id="sub_01">
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">slideUp</a></li>
<li><a href="#" target="_blank">slideDown</a></li>
<li><a href="#" target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_02">
<a href="#" target="_blank">do touch me</a>
<ul id="sub_02">
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">slideUp</a></li>
<li><a href="#" target="_blank">slideDown</a></li>
<li><a href="#" target="_blank">up and down</a></li>
<li><a href="#" target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_03">
<a href="#" target="_blank">do touch me</a>
<ul id="sub_03">
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_04">
<a href="#" target="_blank">do touch me</a>
<ul id="sub_04">
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">slideUp</a></li>
<li><a href="#" target="_blank">slideDown</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_05">
<a href="#" target="_blank">do touch me</a>
<ul id="sub_05">
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">slideDown</a></li>
<li><a href="#" target="_blank">up and down</a></li>
<li><a href="#" target="_blank">animate</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_06">
<a href="#" target="_blank">do touch me</a>
<ul id="sub_06">
<li><a href="#" target="_blank">JavaScript</a></li>
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">slideUp</a></li>
<li><a href="#" target="_blank">slideDown</a></li>
<li><a href="#" target="_blank">up and down</a></li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<p align="center"></p>

<p align="center"></p>
</body>
</html>
效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航