实用资源左侧固定菜单实现子菜单可点击展开和收缩效果

左侧固定菜单实现子菜单可点击展开和收缩效果

固定在左侧的导航栏,点击一级菜单可展开子菜单的效果,经常在一些建站系统的后台可以看到,例如织梦CMS后台:

菜单点击展开和收缩.png

文本主要分享一个简单的左侧固定导航的做法,这里是借助jQuery实现的展开和收缩的效果,下面首先做个简单的示例:

<div class="nav">
 <ul>
  <li class="nav-item">
   <a href="javascript:;">内容管理<span class="a_ico"></span></a>
   <ul>
   <li><a href="#">添加文章</a></li>
   <li><a href="#">管理文章</a></li>
   <li><a href="#">栏目管理</a></li>
   </ul>
  </li>
  <li class="nav-item">
   <a href="javascript:;">网站设置<span class="a_ico"></span></a>
   <ul>
   <li><a href="#">系统设置</a></li>
   <li><a href="#">功能管理</a></li>
   <li><a href="#">友情链接</a></li>
   <li><a href="#">网站公告</a></li>
   <li><a href="#">数据替换</a></li>
   </ul>
  </li>
  <li class="nav-item">
   <a href="javascript:;">模板管理<span class="a_ico"></span></a>
   <ul>
   <li><a href="#">首页模板</a></li>
   <li><a href="#">栏目模板</a></li>
   <li><a href="#">文章模板</a></li>
   <li><a href="#">标签模板</a></li>
   <li><a href="#">手机模板</a></li>
   </ul>
  </li>
  <li class="nav-item">
   <a href="javascript:;">功能插件<span class="a_ico"></span></a>
   <ul>
   <li><a href="#">数据采集</a></li>
   <li><a href="http://www.cssaaa.com/">技术支持</a></li>
   </ul>
  </li>
 </ul>
</div>

这里在html部分简单的做出了一个带有二级菜单的导航栏,默认状态下先将二级菜单隐藏,这里顺便写下基础样式:

body,h3 {
 margin:0;line-height:2;font-size:16px;
}
ul,li {
 list-style:none;padding:0;margin:0;
}
a {
 text-decoration:none;
}
.nav-item ul {
 display:none;
}
.nav {
 position:fixed;
 background-color:#111;
 width:125px;height:100%;padding-top:20px;
}
.nav a {
 color:#fff;display:block;padding:5px 0 5px 10px;
}
.nav-item > a {
 background-color:#345;color:#fff;
 font-weight:bold;
 border-top:3px solid #111;border-bottom:3px solid #222;
 position:relative;
}
.nav-item .a_ico {
 content:" ";position:absolute;right:16px;top:17px;
 width:5px;height:5px;
 display:inline-block;
 border-top:3px solid #eee;border-right:3px solid #eee;
 transform:rotate(45deg);
}
.nav-item li a:hover {
 background-color:#f76;
}

然后通过jQuery实现点击一级菜单时弹出二级菜单,并在展开的同时给一级菜单增加一个class,便于控制视觉样式:

<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
<script>
$(function(){
 $('.nav-item>a').on('click',function(){
  if (!$('.nav').hasClass('nav-mini')) {
   if ($(this).next().css('display') == "none") {
    $('.nav-item').children('ul').slideUp(300);
    $(this).next('ul').slideDown(300);
    $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
   }else{
    $(this).next('ul').slideUp(300);
    $('.nav-item.nav-show').removeClass('nav-show');
   }
  }
 });
});
</script>

当二级菜单展开后,将显示在一级菜单右边“向右”的小箭头定义为“向下”:

.nav-show .a_ico {
 transform:rotate(135deg);top:15px;
}

这样就完成了一个简单的可点击展开的左侧固定导航了。

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/164.html