左侧伸缩式导航源码解析

来源：互联网发布：海口seo软件排行榜编辑：程序博客网时间：2024/05/01 03:02

我们这次分析的源码来自于站长素材
地址如下:
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>

0 0