Bootstrap响应式侧边栏改进版

发布时间：2020-12-18 00:49:39 所属栏目：安全来源：网络整理

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

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

html:

css:

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,.175);
box-shadow: 0 6px 12px rgba(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;
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!