我们这次分析的源码来自于站长素材
地址如下:
http://sc.chinaz.com/jiaoben/150228195730.htm
效果图
建议大家去上面的地址里,自己看一下动态的效果。
二级导航
现在我们分析一下代码
<html>
<head>
<meta charset="utf-8">
<title>jquery网站后台管理系统导航 - 站长素材</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".div2").click(function(){
$(this).next("div").slideToggle("slow")
.siblings(".div3:visible").slideUp("slow");
});
});
</script>
<style>
body{ margin:0;font-family:微软雅黑;}
.left{ width:200px; height:100%; border-right:1px solid #CCCCCC ;#FFFFFF; color:#000000; font-size:14px; text-align:center;}
.div1{text-align:center; width:200px; padding-top:10px;}
.div2{height:40px; line-height:40px;cursor: pointer; font-size:13px; position:relative;border-bottom:#ccc 1px dotted;}
.jbsz {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/1.png);}
.xwzx {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/2.png);}
.zxcp {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/4.png);}
.lmtj {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(images/8.png);}
.div3{display: none;cursor:pointer; font-size:13px;}
.div3 ul{margin:0;padding:0;}
.div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;}
</style>
</head>
<body>
<div class="left">
<div class="div1">
<div class="left_top"><img src="images/bbb_01.jpg"><img src="images/bbb_02.jpg" id="2"><img src="images/bbb_03.jpg"><img src="images/bbb_04.jpg"> </div>
<div class="div2"><div class="jbsz"> </div>基本管理</div>
<div class="div3">
<ul>
<li> 网站配置</li>
<li> 管理设置</li>
<li> 导航菜单</li>
</ul>
</div>
<div class="div2"><div class="xwzx"> </div>新闻中心</div>
<div class="div3">
<ul>
<li> 管理文章</li>
<li> 文章分类</li>
<li> 添加文章</li>
</ul>
</div>
<div class="div2"><div class="zxcp"> </div>最新产品</div>
<div class="div3">
<ul>
<li>图片管理</li>
<li> 图片分类</li>
<li> 添加图片</li>
</ul>
</div>
<div class="div2"><div class="lmtj"> </div> 栏目添加</div>
<div class="div3">
<ul>
<li> 文章系统</li>
<li> 图片系统</li>
<li> 添加表单</li>
<li> 招聘系统</li>
</ul>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
主要看js
<script type="text/javascript">
$(document).ready(
function() {
$(".div2").click(
function() {
$(this).next("div").slideToggle("slow").siblings(
".div3:visible").slideUp("slow");
});
$(".level3").click(
function() {
$(this).next("div").slideToggle("slow").siblings(
".div4:visible").slideUp("slow");
});
});
</script>
我们称div2 那一级(例如基本管理)为一级标题,每个一级标题下都有二级标题(也就是div3)。
因为div的放置顺序是一个div2一个div3然后再一个div2。
$(this).next("div").slideToggle("slow")
就是每次点击一个div2后,下面的div3就从显示到隐藏,从隐藏到显示。
.siblings(".div3:visible")
运行完a段代码后,此时的对象是div3
b段的前半部分就是选择所有可见的div3
.siblings(".div3:visible").slideUp("slow");
然后隐藏他们
b段代码的功能就是当基本管理的二级菜单打开时,点击新闻中心,基本管理的二级菜单也会关闭。
看懂了上面的代码后,我们尝试将原始的二级菜单改写成三级菜单。
三级导航
效果图如下:
JavaScript如下所示
<script type="text/javascript">
<span style="white-space:pre"> </span>$(document).ready(
<span style="white-space:pre"> </span>function() {
<span style="white-space:pre"> </span>$(".div2").click(
<span style="white-space:pre"> </span>function() {
<span style="white-space:pre"> </span>$(this).next("div").slideToggle("slow").siblings(
<span style="white-space:pre"> </span>".div3:visible").slideUp("slow");
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>$(".level3").click(
<span style="white-space:pre"> </span>function() {
<span style="white-space:pre"> </span>$(this).next("div").slideToggle("slow").siblings(
<span style="white-space:pre"> </span>".div4:visible").slideUp("slow");
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>});
</script>
部分css
.div3,.div4 {
display: none;
cursor: pointer;
font-size: 13px;
}
.div3 li {
height: 30px;
line-height: 30px;
list-style: none;
border-bottom: #ccc 1px dotted;
}
.div4 li {
height: 30px;
line-height: 30px;
list-style: none;
border-bottom: #ccc 1px dotted;
padding-left: 28px;
}
部分html代码
<div class="div2"> <div class="jbsz"></div> 基本管理 </div> <div class="div3"> <ul> <li class="level3">网站配置</li> <div class="div4"> <ul> <li>网站配置1</li> <li>网站配置2</li> <li>网站配置3</li> </ul> </div> <li class="level3">管理设置</li> <div class="div4"> <ul> <li>网站配置1</li> <li>网站配置2</li> <li>网站配置3</li> </ul> </div> <li class="level3">导航菜单</li> <div class="div4"> <ul> <li>网站配置1</li> <li>网站配置2</li> <li>网站配置3</li> </ul> </div> </ul> </div>
时间： 2024-10-22 20:15:04