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 陷阱 window全局对象
Nov 26 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
js回调函数原理与用法案例分析
Mar 04 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
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
js实现小时钟效果
2020/03/25 Javascript
python实现一个简单的并查集的示例代码
2018/03/19 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Pygame的程序开始示例代码
2020/05/07 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
廉政教育心得体会
2014/01/01 职场文书
债务纠纷委托书
2014/08/30 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
太行山上观后感
2015/06/05 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server