Versión mejorada de la barra lateral responsiva de Bootstrap

El panel lateral juega un papel muy importante en el diseño responsive, cuando la pantalla es pequeña como la de un teléfono móvil, un panel lateral que se adapta al tamaño de la pantalla puede agregar color al sitio web. En el framework de Bootstrap se proporcionan componentes de barra de navegación y menú desplegable, detalles por favor consulte los documentos oficiales de Bootstrap en el sitio web, aquí no se introducirá.
Este artículo combina la barra de navegación y el menú desplegable, y luego diseña e improve la creación del panel lateral.

html:　

<div class="container">
 <nav class="navbar navbar-default mynavbar">
 <div class="container-fluid">
  <!--botón-->
  <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>
  <!-- Contenido de la barra de navegación -->
  <div class="collapse navbar-collapse" id="side-menu">
  <ul class="nav navbar-nav" id="side-item">
   <li><a href="#">Desarrollo backend</a></li>
   <li><a href="#">Base de datos</a></li>
   <li class="dropdown">
   <a href="#" class="dropdown-activar" id="web-elemento" data-activar="dropdown" role="botón" aria-haspopup="true" aria-expandido="false">Desarrollo frontend <span class="caret"></span></a>
   <!--botón de menú desplegable-->
   <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;
  }
 }

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

Si还想深入学习，请点击此处进行学习，再为大家附上两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y se carga por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume responsabilidad por las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia. Si se verifica, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)