Bootstrap Response Sidebar improved version _javascript tips

The sidebar plays a big role in response design, when the screen is small to the phone's screen, can adapt to the screen size of the sidebar is able to add color to the site, then in the framework of the bootstrap provided the navigation bar and Drop-down menu components, details please go to the official website Bootstrap document view, There is no introduction here.
This article is to combine the navigation bar and Pull-down menu, and then design and improve the production of sidebar.

Html:

<div class= "Container" > <nav class= "navbar navbar-default mynavbar" > <div class= "Container-fluid" > <!--button--> <div class= "Navbar-header" > <button type= "button" class= "Navbar-toggle collapsed Btn-sider" D ata-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> <!--navigation bar content--> <div class= "collapse navbar-collapse" id= "Side-menu" > <ul class= "Nav navbar-n AV "id=" side-item > <li><a href= "#" > Back-end development </a></li> <li><a href= "#" > Database </a& gt;</li> <li class= "dropdown" > <a href= "#" class= "Dropdown-toggle" id= "Web-item" data-toggle= "Dropdow" N "role=" button "aria-haspopup=" true "aria-expanded=" false "> Front-End development <span class=" caret "></span></a > <!--pull-down menu button--> <ul class= "Dropdown-menu" > <li><a href= "#" >HTML/CSS</a></li> <li><a href= "#" &GT;JAVASC Ript</a></li> <li><a href= "#" >jQuery</a></li> <li><a href= "#" >boot Strap</a></li> <li><a href= "#" >node.js</a></li> </ul> </li> & Lt;li><a href= "#" > Mobile development </a></li> <li><a href= "#" > Visual design </a></li> <li&

 Gt;<a href= "#" > Cloud </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;
 }
 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course