精美的多级侧边栏导航菜单【原创

来源:https://www.sucaihuo.com/js/2428.html 2017-07-15 23:52浏览(5813) 收藏

一款精美的多级侧边栏导航菜单,每个菜单都可以设置多级菜单,只需要复制粘帖代码即可,每个菜单的图片都可以自由更换,展开伸缩的效果还是比较平滑的,整体菜单的样式也比较大气,喜欢的童鞋请收下吧。
精美的多级侧边栏导航菜单
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源 下载积分: 30 积分

页面的head部分,需要引入4个CSS样式文件,然后设置好侧边栏的显示样式,代码如下:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/sidebar-menu.css">
<style type="text/css">
.main-sidebar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 100%;
    width: 230px;
    z-index: 810;
    background-color: #222d32;
 }
</style>

页面的body部分,需要根据菜单的层级设置好菜单对应的容器,代码如下:

<aside class="main-sidebar">
<section  class="sidebar">
    <ul class="sidebar-menu">
      <li class="header">导航菜单</li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-files-o"></i>
          <span>界面选项</span>
          <span class="label label-primary pull-right">4</span>
        </a>
        <ul class="treeview-menu" style="display: none;">
          <li><a href="#"><i class="fa fa-circle-o"></i> 置顶</a></li>
          <li><a href="#"><i class="fa fa-circle-o"></i> 盒子</a></li>
          <li><a href="#"><i class="fa fa-circle-o"></i> 固定</a></li>
          <li class=""><a href="#"><i class="fa fa-circle-o"></i> 折叠</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-th"></i> <span>窗口小部件</span>
          <small class="label pull-right label-info">新</small>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-calendar"></i> <span>日历</span>
          <small class="label pull-right label-danger">3</small>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-envelope"></i> <span>邮箱</span>
          <small class="label pull-right label-warning">12</small>
        </a>
      </li>
      <li class="treeview">
        <a href="#">
          <i class="fa fa-share"></i> <span>多级</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="treeview-menu">
          <li><a href="#"><i class="fa fa-circle-o"></i> 一级菜单1</a></li>
          <li>
            <a href="#"><i class="fa fa-circle-o"></i> 一级菜单2 <i class="fa fa-angle-left pull-right"></i></a>
            <ul class="treeview-menu">
              <li><a href="#"><i class="fa fa-circle-o"></i> 二级菜单1</a></li>
              <li>
                <a href="#"><i class="fa fa-circle-o"></i> 二级菜单2 <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                  <li><a href="#"><i class="fa fa-circle-o"></i> 三级菜单1</a></li>
                  <li><a href="#"><i class="fa fa-circle-o"></i> 三级菜单2</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-circle-o"></i> 一级菜单3</a></li>
        </ul>
      </li>
      <li><a href="#"><i class="fa fa-book"></i> <span>文档</span></a></li>
      <li class="header">标签</li>
      <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>重要</span></a></li>
      <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>警示</span></a></li>
      <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>提示</span></a></li>
    </ul>
  </section>
 </aside>
<div class="htmleaf-container">
	<header class="htmleaf-header">
		<h1>精美的多级侧边栏导航菜单<span>菜单图标可以自由设置</span></h1>
	</header>
</div>

页面的底部,需要引入jQuery库和JS插件,并启用插件,代码如下:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="js/sidebar-menu.js"></script>
<script>
	$.sidebarMenu($('.sidebar-menu'));
</script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2428.html
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 沙发
    04-21 10:54
    h***u
    感觉不错,可以应用到后台
1 2