卡卡網(wǎng)

本文介紹一款可折疊側(cè)欄導(dǎo)航菜單，它非常適合用于信息管理系統(tǒng)上。

效果圖

demodownload

示例介紹

本示例使用layui框架實(shí)現(xiàn)，因此需要引用layui的一些CSS和JS文件以及它的其他相關(guān)文件。

• 鼠標(biāo)懸停菜單項(xiàng)時(shí)，有背景過渡動(dòng)畫顯示。 
• 點(diǎn)擊主菜單項(xiàng)目時(shí)，展開或折疊二級(jí)菜單。
• 點(diǎn)擊二級(jí)菜單項(xiàng)目時(shí)，折疊二級(jí)菜單。

HTML代碼

下面是示例的HTML代碼結(jié)構(gòu)。

<ul class="layui-nav layui-nav-tree" lay-filter="test">
  <li class="layui-nav-item layui-nav-itemed">
    <a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i><span>生源追蹤</span></a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i><span>生源列表</span></a></dd>
      <dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span>學(xué)校信息</span></a></dd>
      <dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span>工做計(jì)劃</span></a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;"><i class="fa fa-vcard fa-lg"></i><span>學(xué)員管理</span></a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;"><i class="fa fa-th-list fa-lg"></i> <span>學(xué)員列表</span></a></dd>
      <dd><a href="javascript:;"><i class="fa fa-user-o fa-lg"></i> <span>考勤管理</span></a></dd>
      <dd><a href="javascript:;"><i class="fa fa-send-o fa-lg"></i> <span>溝通計(jì)劃</span></a></dd>
      <dd><a href="javascript:;"><i class="fa fa-frown-o fa-lg"></i> <span>成績(jī)管理</span></a></dd>
    </dl>
  </li>
</ul>

ul標(biāo)簽是導(dǎo)航容器，li是菜單項(xiàng)，dl標(biāo)簽是二級(jí)菜單盒子，dd是二級(jí)菜單項(xiàng)。

CSS

本示例使用的CSS是來自layui的CSS文件：layui.css。版本是2.5.5。

<link rel="stylesheet" href="layui/css/layui-v2.5.5.css" media="all">

下面看看示例里用的主要CSS樣式。

.layui-nav-tree 和 .layui-nav 設(shè)置ul容器的位置、寬度、背景等樣式。

.layui-nav-tree {
  width: 200px;
  padding: 0;
}
.layui-nav {
  position: relative;
  padding: 0 20px;
  background-color: #393D49;
  color: #fff;
  border-radius: 2px;
  font-size: 0;
  box-sizing: border-box;
}

.layui-nav-item 設(shè)置菜單列舉項(xiàng)位置、高寬、行高等樣式。

.layui-nav-item {
  display: block;
  width: 100%;
  line-height: 45px;
}
.layui-nav-item {
  position: relative;
}

.layui-nav-more 設(shè)置菜單項(xiàng)右側(cè)的三角形樣式。

.layui-nav-more {
  content: '';
  width: 0;
  height: 0;
  border-style: solid dashed dashed;
  border-color: #fff transparent transparent;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  -webkit-transition: all .2s;
  position: absolute;
  top: 50%;
  right: 3px;
  margin-top: -3px;
  border-width: 6px;
  border-top-color: rgba(255,255,255,.7);
}

.layui-nav-child 設(shè)置二級(jí)菜單容器樣式。

.layui-nav-itemed > .layui-nav-child {
  display: block;
  padding: 0;
  background-color: rgba(0,0,0,.3) !important;
}
.layui-nav-child a:hover {
  background: 0 0;
    background-color: rgba(0, 0, 0, 0);
  color: #fff;
}
.layui-nav-child {
  position: relative;
  z-index: 0;
  top: 0;
  border: none;
  box-shadow: none;
}
.layui-nav-child {
  display: none;
  position: absolute;
  left: 0;
  top: 65px;
  min-width: 100%;
  line-height: 36px;
  padding: 5px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  border: 1px solid #d2d2d2;
  background-color: #fff;
  z-index: 100;
  border-radius: 2px;
  white-space: nowrap;
}

dd繼承dl樣式，以及繼承li樣式。

.layui-nav-tree .layui-nav-child, .layui-nav-tree .layui-nav-child a:hover {
  color: #fff;
}
.layui-nav-child {
  line-height: 36px;
  white-space: nowrap;
}
li {
  list-style: none;
}

JavaScript

由于本示例由layui實(shí)現(xiàn)，所以使用了layui自帶的JS文件：layui.js，這里用的版本是2.5.5。

實(shí)現(xiàn)方法請(qǐng)看代碼注釋。

<script type="text/javascript" src="layui/layui-v2.5.5.js"></script>
<script>

//JavaScript代碼區(qū)域
layui.use('element', function() {
  var element = layui.element;
});
var isShow = true; //定義一個(gè)標(biāo)志位
$('.kit-side-fold').click(function() {
  //選擇出所有的span，并判斷是不是hidden
  $('.layui-nav-item span').each(function() {
    if ($(this).is(':hidden')) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
  //判斷isshow的狀態(tài)
  if (isShow) {
    $('.layui-side.layui-bg-black').width(60); //設(shè)置寬度
    $('.kit-side-fold i').css('margin-right', '70%'); //修改圖標(biāo)的位置
    //將footer和body的寬度修改
    $('.layui-body').css('left', 60 + 'px');
    $('.layui-footer').css('left', 60 + 'px');
    //將二級(jí)導(dǎo)航欄隱藏
    $('dd span').each(function() {
      $(this).hide();
    });
    //修改標(biāo)志位
    isShow = false;
  } else {
    $('.layui-side.layui-bg-black').width(200);
    $('.kit-side-fold i').css('margin-right', '10%');
    $('.layui-body').css('left', 200 + 'px');
    $('.layui-footer').css('left', 200 + 'px');
    $('dd span').each(function() {
      $(this).show();
    });
    isShow = true;
  }
});

</script>

總結(jié)

本文介紹了一款可折疊側(cè)欄導(dǎo)航菜單，它比較適合信息管理系統(tǒng)使用。該示例使用layui框架實(shí)現(xiàn)，因此需要包含一些依賴文件，使用起來比較麻煩，不過小編已經(jīng)整理好，喜歡的朋友可直接下載源碼使用。

相關(guān)文章

• 一款簡(jiǎn)易的CSS3側(cè)欄滑動(dòng)導(dǎo)航菜單
• 很漂亮的 Bootstrap 3 側(cè)欄滑動(dòng)導(dǎo)航菜單【演示/源碼下載】
• CSS+JS實(shí)現(xiàn)可伸縮可折疊的左邊側(cè)欄項(xiàng)目導(dǎo)航菜單
• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 又一個(gè)隨內(nèi)容滾動(dòng)而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動(dòng)而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航

標(biāo)簽: 側(cè)欄導(dǎo)航  導(dǎo)航欄  導(dǎo)航菜單  菜單  菜單折疊  側(cè)欄