国产福利乳摇在线播放,手机看片aⅴ永久免费无码,欧美性受xxxx白人性爽

技術(shù)頻道 - html技術(shù)

layui框架實現(xiàn)的可折疊側(cè)欄導(dǎo)航菜單（適合信息管理系統(tǒng)）

作者:admin 時間:2023-5-12 16:28:45 瀏覽:

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

效果圖

可折疊側(cè)欄導(dǎo)航菜單（適合信息管理系統(tǒng)）

demo download

示例介紹

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

鼠標(biāo)懸停菜單項時，有背景過渡動畫顯示。
點擊主菜單項目時，展開或折疊二級菜單。
點擊二級菜單項目時，折疊二級菜單。

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>工做計劃</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>溝通計劃</span></a></dd>
      <dd><a href="javascript:;"><i class="fa fa-frown-o fa-lg"></i> <span>成績管理</span></a></dd>
    </dl>
  </li>
</ul>

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

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è)置菜單列舉項位置、高寬、行高等樣式。

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

.layui-nav-more 設(shè)置菜單項右側(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è)置二級菜單容器樣式。

.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實現(xiàn)，所以使用了layui自帶的JS文件：layui.js，這里用的版本是2.5.5。

實現(xiàn)方法請看代碼注釋。

<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; //定義一個標(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');
    //將二級導(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>