浙江 杭州

利用Bootstrap打造滑动响应式侧边栏导航动画特效

系统分类: 网页特效 - jquery插件 - jQuery高级页面组件 2016-03-18

人气53688

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


bootstrap-vertical-menu是一款基于Bootstrap的CSS3响应式滑动侧边栏布局模板。该滑动侧边栏布局在大屏幕中以侧边栏的形式存在,在小屏幕设备中,菜单会被移动到屏幕的底部,只显示菜单的图标。

使用方法

使用该滑动侧边栏布局模板需要引入Boostrap相关依赖文件,制作图标需要引入font-awesome.css字体图标文件,以及模板本身需要的bootstrap-vertical-menu.css文件。

<link rel="stylesheet" href="font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-vertical-menu.css">

 

HTML结构

该滑动侧边栏的HTML结构使用<nav>作为包裹容器,里面使用无序列表来制作需要的菜单选项。每个菜单项都配置了一个font-awesome字体图标

<nav class="navbar navbar-vertical-left">
    <ul class="nav navbar-nav">
      <li>
        <a href>
          <i class="fa fa-fw fa-lg fa-home"></i> 
          <span>Menu 1</span>
        </a>
      </li>
      <li>
        <a href>
          <i class="fa fa-fw fa-lg fa-download "></i> 
          <span>Menu 2</span>
        </a>
      </li>
      ...
    </ul>
</nav>

 

CSS样式

侧边栏菜单的宽度可以通过.navbar-vertical-left来控制,默认是宽160像素(菜单展开后的宽度)。默认侧边栏菜单的高度和屏幕一样高。

.navbar-vertical-left {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 160px;
  overflow: hidden;
  border: none;
  border-radius: 0;
  margin: 0;
  z-index: 999;
}

 

菜单项的总体高度被控制为侧边栏高度的60%。如果想修改为和侧边栏一样的高度,可以修改.navbar-vertical-left ul.navbar-nav元素的高度为100%。

.navbar-vertical-left ul.navbar-nav {
  width: 100%;
  height: 60%;
  display: table;
  margin: 0;
}

 

该滑动侧边栏布局使用CSS媒体查询来控制小屏幕上菜单的布局(屏幕小于768像素)。在小屏幕中,菜单会显示在屏幕的下方,菜单文字会被隐藏,只显示菜单项图标。

@media(max-width: 768px) {
  .navbar-vertical-left {
    position: fixed;
    top: auto;
    bottom: 0;
    height: auto;
    width: 100%;
  }

  .navbar-vertical-left,
  .navbar-vertical-left ul.navbar-nav {
    -webkit-transition: none;
       -moz-transition: none;
            transition: none;
    -webkit-transform: none;
       -moz-transform: none;
            transform: none;
  }

  .navbar-vertical-left ul.navbar-nav > li {
    display: table-cell;
  }

  .navbar-vertical-left ul.navbar-nav > li > a {
    display: inline-block;
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 30px;
  }

  .navbar-vertical-left ul.navbar-nav > li > a > i.fa {
    margin: 0;
  }

  .navbar-vertical-left ul.navbar-nav > li > a > span {
    display: none;
  }
}

                                       

查看演示
下载资源:41
下载资源
错误提交:

格式:zip 大小:48.24KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2219.html 非特殊说明,本文版权归原作者所有,转载请注明出处
利用Bootstrap打造滑动响应式侧边栏导航动画特效

我当前G币余额:0 已下载次数:41

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有6 评论)