jquery下拉/横拉导航栏
2016-03-10 22:16
609 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{padding: 0;
margin: 0
}
.nav {
width: 990px;
height: 40px;
margin: 30px auto;
border: 2px solid navy;
border-radius: 4px;
}
.nav li {
width: 110px;
height: 40px;
float: left;
list-style: none;
text-align: center;
}
.nav li a {
width: 110px;
background-color: steelblue;
font-family: "Microsoft Yahei";
color: white;
font-size: large;
line-height: 40px;
text-decoration: none;
display: inline-block;
}
.nav div{
width: 110px;
height:250px;
border: 2px solid navy;
position: relative;
right:2px;
}
.nav ul li li {
border-bottom: 2px solid navy;
}
.nav ul li a.hoverstyle {
color: black;
background-color: white;
font-weight: bolder;
}
</style>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".nav ul li").children("div").hide();
$(".nav ul li").hover(function() {
$(this).children("a").addClass("hoverstyle");
$(this).children("div").slideDown(50);
}, function() {
$(this).children("a").removeClass("hoverstyle");
$(this).children("div").slideUp(150);
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">一</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">二</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">三</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">四</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">五</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">六</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">七</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">八</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
<li><a href="">九</a>
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</div></li>
</ul>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>横拉菜单导航.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.nav {
font-family:"Microsoft Yahei";
float: left;
position: relative;
width: 250px;
}
ul li {
border: 1px solid gray;
background-color:GhostWhite;
list-style-type: none;
font-size: 15px;
height: 35px;
line-height: 35px;
position: relative;
padding: 0 20px;
}
ul li a {
width: 148px;
margin: 0 auto;
}
ul li.hover_bg {
background: yellow;
}
.secon {
width: 250px;;
position: absolute;
right: -210px;
top: 0;
padding-bottom: 30px;
display: none;
}
.secon a {
display: block;
height: 35px;
line-height: 35px;
padding: 0 20px
}
</style>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".nav ul li").hover(function() {
$(this).addClass("hover_bg");
$(this).children("div").show();
}, function() {
$(this).removeClass("hover_bg");
$(this).children("div").hide();
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li><strong>Menu1</strong>
<div class="secon">
<ul>
<li><a>Sub Menu11</a>
<div class="secon">
<ul>
<li><a>Sub Menu111</a>
<div class="secon">
<ul>
<li><a>Sub Menu1111</a></li>
</ul>
</div></li>
<li><a>Sub Menu112</a>
<div class="secon">
<ul>
<li><a>Sub Menu1121</a></li>
</ul>
</div></li>
<li><a>Sub Menu113</a>
<div class="secon">
<ul>
<li><a>Sub Menu1131</a></li>
</ul>
</div></li>
<li><a>Sub Menu114</a>
<div class="secon">
<ul>
<li><a>Sub Menu1141</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu12</a>
<div class="secon">
<ul>
<li><a>Sub Menu121</a>
<div class="secon">
<ul>
<li><a>Sub Menu1211</a></li>
</ul>
</div></li>
<li><a>Sub Menu122</a><div class="secon">
<ul>
<li><a>Sub Menu1221</a></li>
</ul>
</div></li>
<li><a>Sub Menu123</a><div class="secon">
<ul>
<li><a>Sub Menu1231</a></li>
</ul>
</div></li>
<li><a>Sub Menu124</a><div class="secon">
<ul>
<li><a>Sub Menu1241</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu13</a>
<div class="secon">
<ul>
<li><a>Sub Menu131</a>
<div class="secon">
<ul>
<li><a>Sub Menu1311</a></li>
</ul>
</div></li>
<li><a>Sub Menu132</a><div class="secon">
<ul>
<li><a>Sub Menu1321</a></li>
</ul>
</div></li>
<li><a>Sub Menu133</a><div class="secon">
<ul>
<li><a>Sub Menu1331</a></li>
</ul>
</div></li>
<li><a>Sub Menu134</a><div class="secon">
<ul>
<li><a>Sub Menu1341</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu14</a>
<div class="secon">
<ul>
<li><a>Sub Menu141</a>
<div class="secon">
<ul>
<li><a>Sub Menu1411</a></li>
</ul>
</div></li>
<li><a>Sub Menu142</a><div class="secon">
<ul>
<li><a>Sub Menu1421</a></li>
</ul>
</div></li>
<li><a>Sub Menu143</a><div class="secon">
<ul>
<li><a>Sub Menu1431</a></li>
</ul>
</div></li>
<li><a>Sub Menu144</a><div class="secon">
<ul>
<li><a>Sub Menu1441</a></li>
</ul>
</div></li>
</ul>
</div></li>
</ul>
</div></li>
<li><strong>Menu2</strong>
<div class="secon">
<ul>
<li><a>Sub Menu21</a>
<div class="secon">
<ul>
<li><a>Sub Menu211</a>
<div class="secon">
<ul>
<li><a>Sub Menu2111</a></li>
</ul>
</div></li>
<li><a>Sub Menu212</a>
<div class="secon">
<ul>
<li><a>Sub Menu2121</a></li>
</ul>
</div></li>
<li><a>Sub Menu213</a>
<div class="secon">
<ul>
<li><a>Sub Menu2131</a></li>
</ul>
</div></li>
<li><a>Sub Menu214</a>
<div class="secon">
<ul>
<li><a>Sub Menu2141</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu22</a>
<div class="secon">
<ul>
<li><a>Sub Menu221</a>
<div class="secon">
<ul>
<li><a>Sub Menu2211</a></li>
</ul>
</div></li>
<li><a>Sub Menu222</a><div class="secon">
<ul>
<li><a>Sub Menu2221</a></li>
</ul>
</div></li>
<li><a>Sub Menu223</a><div class="secon">
<ul>
<li><a>Sub Menu2231</a></li>
</ul>
</div></li>
<li><a>Sub Menu224</a><div class="secon">
<ul>
<li><a>Sub Menu2241</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu23</a>
<div class="secon">
<ul>
<li><a>Sub Menu231</a>
<div class="secon">
<ul>
<li><a>Sub Menu2311</a></li>
</ul>
</div></li>
<li><a>Sub Menu232</a><div class="secon">
<ul>
<li><a>Sub Menu2321</a></li>
</ul>
</div></li>
<li><a>Sub Menu233</a><div class="secon">
<ul>
<li><a>Sub Menu2331</a></li>
</ul>
</div></li>
<li><a>Sub Menu234</a><div class="secon">
<ul>
<li><a>Sub Menu2341</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu24</a>
<div class="secon">
<ul>
<li><a>Sub Menu241</a>
<div class="secon">
<ul>
<li><a>Sub Menu2411</a></li>
</ul>
</div></li>
<li><a>Sub Menu242</a><div class="secon">
<ul>
<li><a>Sub Menu2421</a></li>
</ul>
</div></li>
<li><a>Sub Menu243</a><div class="secon">
<ul>
<li><a>Sub Menu2431</a></li>
</ul>
</div></li>
<li><a>Sub Menu244</a><div class="secon">
<ul>
<li><a>Sub Menu2441</a></li>
</ul>
</div></li>
</ul>
</div></li>
</ul>
</div></li>
<li><strong>Menu3</strong>
<div class="secon">
<ul>
<li><a>Sub Menu31</a>
<div class="secon">
<ul>
<li><a>Sub Menu311</a>
<div class="secon">
<ul>
<li><a>Sub Menu3111</a></li>
</ul>
</div></li>
<li><a>Sub Menu312</a>
<div class="secon">
<ul>
<li><a>Sub Menu3121</a></li>
</ul>
</div></li>
<li><a>Sub Menu313</a>
<div class="secon">
<ul>
<li><a>Sub Menu3131</a></li>
</ul>
</div></li>
<li><a>Sub Menu314</a>
<div class="secon">
<ul>
<li><a>Sub Menu3141</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu32</a>
<div class="secon">
<ul>
<li><a>Sub Menu321</a>
<div class="secon">
<ul>
<li><a>Sub Menu3211</a></li>
</ul>
</div></li>
<li><a>Sub Menu322</a><div class="secon">
<ul>
<li><a>Sub Menu3221</a></li>
</ul>
</div></li>
<li><a>Sub Menu323</a><div class="secon">
<ul>
<li><a>Sub Menu3331</a></li>
</ul>
</div></li>
<li><a>Sub Menu324</a><div class="secon">
<ul>
<li><a>Sub Menu3241</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu33</a>
<div class="secon">
<ul>
<li><a>Sub Menu331</a>
<div class="secon">
<ul>
<li><a>Sub Menu3311</a></li>
</ul>
</div></li>
<li><a>Sub Menu332</a><div class="secon">
<ul>
<li><a>Sub Menu3321</a></li>
</ul>
</div></li>
<li><a>Sub Menu333</a><div class="secon">
<ul>
<li><a>Sub Menu3331</a></li>
</ul>
</div></li>
<li><a>Sub Menu334</a><div class="secon">
<ul>
<li><a>Sub Menu3341</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu34</a>
<div class="secon">
<ul>
<li><a>Sub Menu341</a>
<div class="secon">
<ul>
<li><a>Sub Menu3411</a></li>
</ul>
</div></li>
<li><a>Sub Menu342</a><div class="secon">
<ul>
<li><a>Sub Menu3421</a></li>
</ul>
</div></li>
<li><a>Sub Menu343</a><div class="secon">
<ul>
<li><a>Sub Menu3431</a></li>
</ul>
</div></li>
<li><a>Sub Menu344</a><div class="secon">
<ul>
<li><a>Sub Menu3441</a></li>
</ul>
</div></li>
</ul>
</div></li>
</ul>
</div></li>
<li><strong>Menu4</strong>
<div class="secon">
<ul>
<li><a>Sub Menu41</a>
<div class="secon">
<ul>
<li><a>Sub Menu411</a>
<div class="secon">
<ul>
<li><a>Sub Menu4111</a></li>
</ul>
</div></li>
<li><a>Sub Menu412</a>
<div class="secon">
<ul>
<li><a>Sub Menu4121</a></li>
</ul>
</div></li>
<li><a>Sub Menu413</a>
<div class="secon">
<ul>
<li><a>Sub Menu4231</a></li>
</ul>
</div></li>
<li><a>Sub Menu414</a>
<div class="secon">
<ul>
<li><a>Sub Menu4141</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu42</a>
<div class="secon">
<ul>
<li><a>Sub Menu421</a>
<div class="secon">
<ul>
<li><a>Sub Menu4211</a></li>
</ul>
</div></li>
<li><a>Sub Menu422</a><div class="secon">
<ul>
<li><a>Sub Menu4221</a></li>
</ul>
</div></li>
<li><a>Sub Menu423</a><div class="secon">
<ul>
<li><a>Sub Menu4231</a></li>
</ul>
</div></li>
<li><a>Sub Menu434</a><div class="secon">
<ul>
<li><a>Sub Menu4341</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu43</a>
<div class="secon">
<ul>
<li><a>Sub Menu431</a>
<div class="secon">
<ul>
<li><a>Sub Menu4311</a></li>
</ul>
</div></li>
<li><a>Sub Menu432</a><div class="secon">
<ul>
<li><a>Sub Menu4321</a></li>
</ul>
</div></li>
<li><a>Sub Menu433</a><div class="secon">
<ul>
<li><a>Sub Menu4331</a></li>
</ul>
</div></li>
<li><a>Sub Menu434</a><div class="secon">
<ul>
<li><a>Sub Menu4341</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu44</a>
<div class="secon">
<ul>
<li><a>Sub Menu441</a>
<div class="secon">
<ul>
<li><a>Sub Menu4411</a></li>
</ul>
</div></li>
<li><a>Sub Menu442</a><div class="secon">
<ul>
<li><a>Sub Menu4421</a></li>
</ul>
</div></li>
<li><a>Sub Menu443</a><div class="secon">
<ul>
<li><a>Sub Menu4431</a></li>
</ul>
</div></li>
<li><a>Sub Menu444</a><div class="secon">
<ul>
<li><a>Sub Menu4441</a></li>
</ul>
</div></li>
</ul>
</div></li>
</ul>
</div></li>
<li><strong>Menu5</strong>
<div class="secon">
<ul>
<li><a>Sub Menu51</a>
<div class="secon">
<ul>
<li><a>Sub Menu511</a>
<div class="secon">
<ul>
<li><a>Sub Menu5111</a></li>
</ul>
</div></li>
<li><a>Sub Menu512</a>
<div class="secon">
<ul>
<li><a>Sub Menu5121</a></li>
</ul>
</div></li>
<li><a>Sub Menu513</a>
<div class="secon">
<ul>
<li><a>Sub Menu5131</a></li>
</ul>
</div></li>
<li><a>Sub Menu514</a>
<div class="secon">
<ul>
<li><a>Sub Menu5141</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu52</a>
<div class="secon">
<ul>
<li><a>Sub Menu521</a>
<div class="secon">
<ul>
<li><a>Sub Menu5211</a></li>
</ul>
</div></li>
<li><a>Sub Menu522</a><div class="secon">
<ul>
<li><a>Sub Menu5221</a></li>
</ul>
</div></li>
<li><a>Sub Menu523</a><div class="secon">
<ul>
<li><a>Sub Menu5231</a></li>
</ul>
</div></li>
<li><a>Sub Menu524</a><div class="secon">
<ul>
<li><a>Sub Menu5241</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu53</a>
<div class="secon">
<ul>
<li><a>Sub Menu531</a>
<div class="secon">
<ul>
<li><a>Sub Menu5311</a></li>
</ul>
</div></li>
<li><a>Sub Menu532</a><div class="secon">
<ul>
<li><a>Sub Menu5321</a></li>
</ul>
</div></li>
<li><a>Sub Menu533</a><div class="secon">
<ul>
<li><a>Sub Menu5331</a></li>
</ul>
</div></li>
<li><a>Sub Menu534</a><div class="secon">
<ul>
<li><a>Sub Menu5341</a></li>
</ul>
</div></li>
</ul>
</div></li>
<li><a>Sub Menu54</a>
<div class="secon">
<ul>
<li><a>Sub Menu541</a>
<div class="secon">
<ul>
<li><a>Sub Menu5411</a></li>
</ul>
</div></li>
<li><a>Sub Menu542</a><div class="secon">
<ul>
<li><a>Sub Menu5421</a></li>
</ul>
</div></li>
<li><a>Sub Menu543</a><div class="secon">
<ul>
<li><a>Sub Menu5431</a></li>
</ul>
</div></li>
<li><a>Sub Menu544</a><div class="secon">
<ul>
<li><a>Sub Menu5441</a></li>
</ul>
</div></li>
</ul>
</div></li>
</ul>
</div></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 20个Jquery实用工具
- jQuery对Ajax的支持
- jquery的end()，addBack()方法example
- jquery操作select
- jquery实现图片上传前本地预览
- jquery .children("li") 的调用
- JQuery中$.ajax()方法参数详解
- jquery图片轮播器插件 jquery.slides
- JQuery中$.ajax()方法参数详解 转载
- JQUERY获取当前页面的URL信息
- jquery DataTabale 数据列的增删
- DOM对象和jQuery对象的区别
- jQuery---ajax
- jQuery Ajax
- jquery dialog 参数使用
- jquery dialog环境搭建
- Jquery修改input name修改不了
- jquery ajax async
- selenium 加载jquery
- jquery ui 日期控件中文