菜单

jq实现侧边导航

2015-07-31 - Developer

对于国内网站开发日趋的成熟,许多公司对后台的界面也做了改善需求。接下来就是关于侧边导航的jq写法。

需求:做个导航,点击不同的链接,显示相应的内容。

首先,做个基本的html、css布局

 

其次,然后做个简单的分析。

子目录内容在打开页面的时候是隐藏的,当鼠标点击导航链接时,触发一个动作执行显示隐藏的子导航。那就是show()显示和hide()隐藏

 

如此,再把相应的css调试好就出啦效果了

 

最后贴上完整的代码

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>jq商品导航</title>
<link rel=”stylesheet” href=”css/d.css” type=”text/css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.level1>a”).click(function(){
$(this).addClass(“current”) //给当前元素添加 current样式
.next().show() //显示下一个元素
.parent().siblings().children(“a”).removeClass(“current”)
//父元素的同辈元素的子元素a移除current样式
.next().hide(); //隐藏它们的下一个元素
return false;
});
});
</script>

</head>
<body>
<div class=”box”>
<ul class=”menu”>
<li class=”level1″>
<a href=”#none”>水果</a>
<ul class=”level2″>
<li><a href=”#none”>苹果</a></li>
<li><a href=”#none”>橘子</a></li>
<li><a href=”#none”>香蕉</a></li>
<li><a href=”#none”>凤梨</a></li>
<li><a href=”#none”>西瓜</a></li>
<li><a href=”#none”>黑布林</a></li>
</ul>
</li>
<li class=”level1″>
<a href=”#none”>蔬菜</a>
<ul class=”level2″>
<li><a href=”#none”>南瓜</a></li>
<li><a href=”#none”>茄子</a></li>
<li><a href=”#none”>萝卜</a></li>
<li><a href=”#none”>香菜</a></li>
<li><a href=”#none”>白菜</a></li>
<li><a href=”#none”>西兰花</a></li>
</ul>
</li>
<li class=”level1″>
<a href=”#none”>食品</a>
<ul class=”level2″>
<li><a href=”#none”>饼干</a></li>
<li><a href=”#none”>火腿肠</a></li>
<li><a href=”#none”>方便面</a></li>
<li><a href=”#none”>面包</a></li>
<li><a href=”#none”>咸鸡蛋</a></li>
<li><a href=”#none”>速食鸡肉</a></li>
</ul>
</li>

</ul>
</div>
</body>
</html>

 

 

 

 

css文件
/* reset */
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:”\5b8b\4f53″,”Arial Narrow”;background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}

.box {
width: 150px;
margin: 0 auto;
}
.menu{
width:100%;
overflow:hidden;
border-color: #C4D5DF;
border-style: solid;
border-width: 0 1px 1px;
}

/* lv1 */
.menu li.level1 a{
display: block;
height: 28px;
line-height: 28px;
background:#EBF3F8;
font-weight:700;
color: #5893B7;
text-indent: 14px;
border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{
width:100%;
display:none;
text-align: left;
}
.menu li ul.level2 li a{
width: 100%;
display: block;
height: 28px;
line-height: 28px;
background:#ffffff;
font-weight:400;
color: #42556B;
text-indent: 18px;
border-top: 0px solid #ffffff;
overflow: hidden;
text-align: left;
}
.menu li ul.level2 li a:hover{
color:#f60;
}

 

转载请注明: 转载自—艾瑞可erik

本文链接地址: http://erik.xyz/1126.html