我们这次分析的源码来自于站长素材
地址如下:
​​​http://sc.chinaz.com/jiaoben/150228195730.htm​​​
效果图

左侧伸缩式导航源码解析_导航

左侧伸缩式导航源码解析_jquery_02





建议大家去上面的地址里,自己看一下动态的效果。

二级导航

现在我们分析一下代码


<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段代码的功能就是当基本管理的二级菜单打开时,点击新闻中心,基本管理的二级菜单也会关闭。




看懂了上面的代码后,我们尝试将原始的二级菜单改写成三级菜单。


三级导航

效果图如下:


左侧伸缩式导航源码解析_ide_03





JavaScript如下所示


<script type="text/javascript">
<span >  </span>$(document).ready(
<span >      </span>function() {
<span >        </span>$(".div2").click(
<span >            </span>function() {
<span >              </span>$(this).next("div").slideToggle("slow").siblings(
<span >                  </span>".div3:visible").slideUp("slow");
<span >            </span>});
<span >        </span>$(".level3").click(
<span >            </span>function() {
<span >              </span>$(this).next("div").slideToggle("slow").siblings(
<span >                  </span>".div4:visible").slideUp("slow");
<span >            </span>});
<span >      </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>