一款精美的多级侧边栏导航菜单,每个菜单都可以设置多级菜单,只需要复制粘帖代码即可,每个菜单的图片都可以自由更换,展开伸缩的效果还是比较平滑的,整体菜单的样式也比较大气,喜欢的童鞋请收下吧。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791