注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Search的博客

不断学习中!

 
 
 

日志

 
 

Jquery纵向导航栏(jquery竖直手风琴导航菜单)  

2015-03-25 18:51:10|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<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;}
  body{
    overflow-x:hidden; 
  }
  </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> <a href="test1.html" target="main">网站配置</a></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>

</body>
</html>


  评论这张
 
阅读(179)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017