Bootstrap响应式侧边栏改进版
2016-09-17 14:17
525 查看
侧边栏在响应式设计中起到很大的作用,当屏幕小到手机的屏幕时,能够自适应屏幕大小的侧边栏固然能够为网站添加色彩,那么在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实战教程
您可能感兴趣的文章:
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- Vue.js每天必学之内部响应式原理探究
- 基于jQuery倾斜打开侧边栏菜单特效代码
- jQuery固定浮动侧边栏实现思路及代码
- jQuery侧边栏实现代码
- 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
- 浅析Bootstrap验证控件的使用
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- 使用BootStrap实现用户登录界面UI
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap插件全集
- BootStrap mvcpager分页样式(get请求,刷新页面)
- Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
- Boostrap基础教程之JavaScript插件篇
- Bootstrap框架动态生成Web页面文章内目录的方法
- JS组件Bootstrap Table使用实例分享
- bootstrap学习笔记之初识bootstrap
- C# 封装HtmlHelper组件:BootstrapHelper