Bootstrap Responsive Sidebar Improved Version

The sidebar plays a significant role in responsive design. When the screen is small, such as on a mobile phone, a sidebar that adapts to the screen size can add color to the website. Bootstrap framework provides components for navigation bars and dropdown menus. For details, please refer to the official Bootstrap documentation. No introduction is provided here.
This article combines the navigation bar and dropdown menu, and then designs and improves the 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" 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>
  <!-- Navigation bar content -->
  <div class="collapse navbar-collapse" id="side-menu">
  <ul class="nav navbar-nav" id="side-item">
   <li><a href="#">Back-end Development</a></li>
   <li><a href="#">Database</a></li>
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Front-end Development <span class="caret"></span></a>
   <!--Dropdown Menu Button-->
   <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="#">Mobile Development</a></li>
   <li><a href="#">Visual Design</a></li>
   <li><a href="#">Cloud Computing</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;
  }
 }

That's all for this article. I hope it will be helpful to your learning and also hope that everyone will support and cheer for the tutorial.

If you want to learn more deeply, you can click here to learn. In addition, I will attach two excellent topics for you: Bootstrap Learning Tutorial Bootstrap Practical Tutorial

Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit manually, and does not bear relevant legal liability. If you find any copyright-infringing content, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)