头像

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

来源:http://www.huoseo.com/js/2428.html 18***38 2017-07-15 23:52浏览(4079) 收藏

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

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 66 下载资源 下载积分: 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并保留原文链接:http://www.huoseo.com/js/2428.html
最新交易
评论8
头像

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

  • 头像 7楼
    04-12 19:13
    长***的
    正好缺个好点的导航 后台可以美化了
  • 头像 6楼
    03-27 09:49
    等***啡
    可以做网站后台,很不错的
  • 头像 5楼
    12-12 09:17
    WO***OW
    很漂亮的菜单导航
  • 头像 4楼
    11-24 09:40
    xi***89
    有没有手机上直接可以用用的横向下拉菜单
  • 头像 3楼
    10-31 15:53
    zh***依旧
    很好的菜单导航
  • 头像 板凳
    10-16 14:21
    勿***心
    底下引入js文件有点不能理解
  • 头像 椅子
    07-30 10:57
    一***泉
    果然原创就是不一样。
  • 头像 沙发
    07-24 07:41
    一***泉
    原创就是不一样喜极而泣
1 2
如何中彩票 www.406644.com-济南结婚彩礼| www.874099.com-最新h5彩票源码| www.2800.in-广东彩票下载安装| www.033618.com-彩票帮投怎么回事| www.313072.com-体彩排列5开奖查询| www.828486.com-下载彩16-| www.744998.com-大赢家彩票网站首页| www.821250.com-今天福彩3d布衣图| www.1139.cc-公益福彩亲情助学| www.783542.com-什么是会员彩票| www.223002.com-大发快三密聊群| www.108892.com-手机彩票888网站| www.927378.com-如何买体育彩票| www.hr36.com-彩票号码预测| www.15717.cc-体彩61-| www.016339.com-彩票k线图apk| www.1442.top-今日彩票手机版下载| www.9654.xyz-排列三预测彩宝贝| www.015735.com-七星彩是不是作假| www.404578.com-乐彩双色球诗谜汇总| www.33798.com-招聘彩票分析师| www.003571.com-彩之源app靠谱吗| www.113243.com-大奖彩票平台可靠吗| 网易彩票www.501433.com| www.469273.com-彩票开机关注号码| www.702676.com-有什么彩票是三位数| www.982002.com-微彩下载-| www.004216.com-湖北快三应出号| www.525549.com-赌时时彩赢三百万| www.339495.com-赢彩网怎么玩| www.441822.com-体育彩票退机器押金| www.539434.com-彩票行业发展| www.50024.cc-有玩华宇彩票的吗| www.om81.com-彩票老师带赚| www.557933.com-海南四个数的七星彩| www.645795.com-足彩必赢法-| www.725645.com-彩票11选5分析器| www.800038.com-今晚福彩票开奖结果| www.874882.com-体彩快乐20分开奖| www.944587.com-信博彩票可靠吗| www.994002.com-玩球彩票-| www.ga67.com-酷彩吧官网| www.k41.cc-3d彩民乐图库| www.343582.com-赚钱平台彩票| www.506903.com-至尊彩安全吗| www.624522.com-豪彩娱乐登录地址2| www.18aa.cc-每日首充送彩金| www.625.space-胜负彩多久开奖| www.8562.biz-中彩网cc-| www.696391.com-足球彩票19052| www.959335.com-彩票快乐十分下载| www.026565.com-利记是什么博彩公司| www.315062.com-体彩猜胜负规则| www.683120.com-那个软件可以买彩票| www.773908.com-彩博888下载| www.877585.com-博彩跨境诈骗| www.934304.com-智博彩票平台| www.987583.com-福利彩票全国兑奖| www.bq6.com-砍龙彩票骗局| www.cai9191.com福建快三基本走势图| www.yj76.com-福彩35-| www.44ax.com-什么是博彩-| www.900206.com-乐彩购彩票app| www.895400.com-中体华彩合法吗| www.rz.com-北京快三大图| www.45zu.com-南昌龙彩科技| www.34829.com-微信能玩快三吗| www.8648.cn-福彩群英会在线开奖| www.014041.com-七星彩合值走试图| 500彩票www.175906.com| www.72vx.com-竞彩足球串关表说明| www.262842.com-七星彩玩法开奖日期| www.083057.com-彩坛至尊-| www.028303.com-高频彩大平台| www.246114.com-8k易彩下载-| www.325020.com-海南七星彩投注平台| www.456034.com-4scc彩票下截| www.703996.com-竞彩序列号怎么兑奖| www.834321.com-好彩烟真假-| www.962492.com-深圳市福彩-| www.476823.com-体彩超大乐-| www.535303.com-生肖彩票怎么下软件| www.598695.com-有人买彩票中奖的吗| www.662029.com-竞彩中奖者-| www.737449.com-搜福彩三d开奖号| www.864677.com-彩票指南报纸凤彩网| www.923608.com-体育彩票坐庄| www.977907.com-如何分析足彩赔率| www.al.cc-北京快三今晚推荐号| www.ni36.com-竞彩足球预测网| www.001685.com-所以彩种投注平台| www.77411.cc-e乐彩官方网登录| www.384008.com-福彩彩票条形码扫描| www.587008.com-连红彩票下载| www.959482.com-盈彩官网下载| www.ar57.com-信誉老私彩平台| www.570666.com-网上购买福彩可靠吗| www.v15.net-竞彩足球理论奖金| www.mt1.com-人人中彩票升级维护| www.532725.com-7星彩北京大奖| www.596114.com-即开型福利彩票| www.657757.com-体育彩开奖结果今天| www.707970.com-竞彩首页计算器| www.757081.com-信誉彩app-| www.802559.com-涛哥2胆3d福彩| www.870342.com-河北快三结束时间| www.908636.com-最新彩票开奖查询| www.960141.com-太阳彩票app| www.990593.com-彩票通软件下载| www.cp7622.com-北京快三一定牛走图| www.hh20.com-全能中彩彩票假| www.vi11.cc-利彩app下载| www.94.me-易发彩网站-| www.842205.com-彩票公益金怎么分配| www.908003.com-高端彩票源码| www.967945.com-跟买彩票骗局| 中国福利彩票www.33588j.com| www.125433.com-彩票分析基础pdf| www.781162.com-微彩吧彩票-| www.900539.com-小军福彩三d图| www.979220.com-香港好彩烟-| www.67kp.com-七乐彩选号精准技巧| www.408.biz-彩票中奖51亿| www.396063.com-竞彩和北单返奖率| www.503272.com-官网开奖的彩票| www.571555.com-新版中免蓝好彩| www.654957.com-下载七星彩预测软件| www.721639.com-足彩310专家预测| www.813204.com-香港买彩金值多少钱| www.909271.com-天津快三是真是假| www.972739.com-彩铅画简单星空| www.pr3.com-快三和值图表| www.og08.com-皇都彩票网址| www.47399.com-贵州福利彩票下载| www.007526.com-k彩彩民福地手机版| www.59lf.com-2019年竞彩足球| www.cp1518.com-快三线上平台| www.pl99.com-时时彩在线单期计划| www.03ar.com-聚彩彩票是什么意思| www.437447.com-黔西南州体彩中心| www.979322.com-三分彩后一规律| www.1zp.com-彩霸王心水论诖| www.68bi.com-爱乐透手机彩票网站| www.803165.com-足球彩票怎样看中奖| www.508836.com-ee彩apk1-| www.640173.com-彩票外挂软件app| www.771884.com-福利彩票排列5开奖| www.987403.com-77彩票安卓-| www.7443.cm-省体彩中心待遇| www.119514.com-家彩网app下载| www.270996.com-彩77官方网登录| www.523786.com-时时彩输了50万| www.955714.com-中福彩票群-| www.a48.loan-青岛福彩兑奖中心| www.217.net-狗万彩票-| www.6600.biz-今日彩票运-| www.115209.com-彩钢板多少钱一平米| www.372710.com-八彩娱乐app| www.732388.com-重庆结婚彩礼10万| E彩堂www.9818y.cc| www.110347.com-体彩和福彩合并| www.929262.com-福彩网能玩吗| www.66cg.com-中彩票搞笑图片带字| www.cp0206.com-一分快三怎样稳赚|