Bootstrap响应式侧边栏改进版


Posted in Javascript onSeptember 17, 2016

侧边栏在响应式设计中起到很大的作用,当屏幕小到手机的屏幕时,能够自适应屏幕大小的侧边栏固然能够为网站添加色彩,那么在Bootstrap的框架中提供了导航条和下拉菜单的组件,详情请自行到官网Bootstrap的文档查看,这里就不作介绍了。
本文是将其中的导航条和下拉菜单进行结合,然后设计并改进了侧边栏的制作。

Bootstrap响应式侧边栏改进版

html: 

<div class="container">
 <nav class="navbar navbar-default mynavbar">
 <div class="container-fluid">
  <!--按钮-->
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed btn-sider" data-toggle="collapse" data-target="#side-menu" aria-expanded="false">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  </div>

  <!-- 导航条内容 -->
  <div class="collapse navbar-collapse" id="side-menu">
  <ul class="nav navbar-nav" id="side-item">
   <li><a href="#">后端开发</a></li>
   <li><a href="#">数据库</a></li>
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端开发 <span class="caret"></span></a>
   <!--下拉菜单按钮-->
   <ul class="dropdown-menu">
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">node.js</a></li>
   </ul>
   </li>
   <li><a href="#">移动开发</a></li>
   <li><a href="#">视觉设计</a></li>
   <li><a href="#">云计算</a></li>
  </ul>
  </div>
 </div>
 </nav>
</div>

 css:

.mynavbar{
  background-color: #fff;
  border:none;
 }
 .navbar-header,#side-item{
  background-color: #0b3558;
 }

 #side-menu>ul>li>a{
  color:#fff;
  font-size: 18px;
  font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
 }
 #side-menu>ul{
  width: 100%;
 }
 #side-menu>ul>li{
  text-align: center;
  width: 16%;
  margin-left: 5px;
 }
 #side-menu .dropdown-menu {
  border: none;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
 #side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover {
  color: #24b0ff;
  text-decoration: none;
  background-color: transparent;
 }
 .btn-sider{
  float: left;
  border:none;
  outline: none;
  margin-left: 10px;
 }
 .mynavbar .btn-sider .icon-bar{
  background-color:#fff;
  width:23px;
  height:3px;
 }
 .mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover {
  background-color: transparent;
 }
 @media (max-width: 768px) {
  .container {
  padding-left: 0px;
  }
  #side-menu{
  border: none;

  }
  #side-item{
  background: rgba(43, 54, 67, 0.97);
  }
  #side-menu>ul {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: -15px;
  margin-bottom: 0px;
  width: 40%;
  height: 999px;
  }
  #side-menu>ul>li {
  text-align: left;
  width:100%;
  margin-left:0px;
  }
  #side-menu>ul>li a{
  font-size:16px;
  }
  #side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
  background-color: #38a99c;
  color:#fff;
  }
  #side-menu .dropdown-menu{
  box-shadow:none;
  }
  #side-menu .dropdown-menu li a{
  padding-top:10px;
  color:#fff;
  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

Javascript 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
js性能优化技巧
Nov 29 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
js实现简单分页导航栏效果
Jun 28 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
H5用户注册表单页 注册模态框!
Sep 17 #Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 #Javascript
JavaScript职责链模式概述
Sep 17 #Javascript
JavaScript类的写法
Sep 17 #Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 #Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 #Javascript
JavaScript每天必学之数组和对象部分
Sep 17 #Javascript
You might like
Laravel实现定时任务的示例代码
2017/08/10 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python判断两个对象相等的原理
2017/12/12 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
旅游业大学生创业计划书
2014/01/31 职场文书
服务员态度差检讨书
2014/10/28 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python