Bootstrap响应式侧边栏改进版

Bootstrap响应式侧边栏改进版

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

本文是将其中的导航条和下拉菜单进行结合，然后设计并改进了侧边栏的制作。

html:

前端开发

<ul class="dropdown-menhttp://u">

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%http://;

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;

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。