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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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脚本数据库功能详解(上)
2006/10/09 PHP
实用函数8
2007/11/08 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
vue实现评论列表功能
2019/10/25 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
python机器人运动范围问题的解答
2019/04/29 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python实现微信自动回复机器人功能
2019/07/11 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python中列表的含义及用法
2020/05/26 Python
python使用列表的最佳方案
2020/08/12 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
残疾人创业典型事迹
2014/02/01 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python