Tất cả bài viết | Bootstrap

Hướng dẫn cách tạo Side menu bằng Bootstrap

Bước 1: Chuẩn bị nội dung HTML để tạo cấu trúc menu

<nav class="navbar navbar-default sidebar" role="navigation"> 
 <div class="container-fluid"> 
  <div class="navbar-header"> 
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
   </button> 
  </div> 
  <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
   <ul class="nav navbar-nav"><div class="logo_menuchinh" style="float:left; padding-top:5px; padding-left:10px; color:#fff; margin-left:auto; margin-right:auto; text-align=center; line-height:40px; font-size:16px;font-weight:bold;font-family:Arial">HOCWEBGIARE.COM</div><div class="menu-icon"><span>Menu</span></div> 
    <li class="active"><a>Trang chủ<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a>
    </li> 
    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">Thành viên <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a> 
     <ul class="dropdown-menu forAnimate" role="menu"> 
      <li><a>Thêm</a>
      </li> 
      <li><a>Sửa</a>
      </li> 
      <li><a>Xóa</a>
      </li> 
      <li class="divider"></li> 
      <li><a>Đổi mật khẩu</a>
      </li> 
      <li class="divider"></li> 
      <li><a>Thông tin cá nhân</a>
      </li> 
     </ul> 
    </li> 
    <li><a>Danh mục sản phẩm<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a>
    </li> 
    <li><a>Logout<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-log-out"></span></a>
    </li> 
   </ul> 
  </div> 
 </div>
</nav>

Bước 2: Định dạng CSS cho menu

100

101

102

103

104

105

106

107

108

109

110

111

112

<style type="text/css">body, html {    
height: 100%;
}
 
nav.sidebar, .main {    
-webkit-transition: margin 200ms ease-out;  
-moz-transition: 
margin 200ms ease-out;  
-o-transition: 
margin 200ms ease-out;  
transition: margin 200ms ease-out;
}
 
.main { 
padding: 10px 10px 0 10px;
} 
 
@media (min-width: 765px) { 
 
.main { 
position: absolute; 
width: calc(100% - 40px); 
margin-left: 40px; 
float: right;
} 
 
nav.sidebar:hover + .main { 
margin-left: 200px;
} 
 
nav.sidebar.navbar.sidebar&amp;gt;.container .navbar-brand, .navbar&amp;gt;.container-fluid .navbar-brand {
 margin-left: 0px;
} 
 
nav.sidebar .navbar-brand, nav.sidebar .navbar-header { 
text-align: center; 
width: 100%; 
margin-left: 0px;
} 
nav.sidebar a { 
padding-right: 13px;
} 
 
nav.sidebar .navbar-nav &amp;gt; li:first-child { 
border-top: 1px #e5e5e5 solid;
} 
nav.sidebar .navbar-nav &amp;gt; li { 
border-bottom: 1px #e5e5e5 solid;
} 
 
nav.sidebar .navbar-nav .open .dropdown-menu { 
position: static; 
float: none; 
width: auto; 
margin-top: 0; 
background-color: transparent; 
border: 0; 
-webkit-box-shadow: none; 
box-shadow: none;
} 
 
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid { 
padding: 0 0px 0 0px;
} 
 
.navbar-inverse .navbar-nav .open .dropdown-menu&amp;gt;li&amp;gt;
 
a { color: #777;} 
 
nav.sidebar { 
width: 200px; 
height: 100%; 
margin-left: -160px; 
float: left; 
margin-bottom: 0px;
} 
 
nav.sidebar li { 
width: 100%;
} 
 
nav.sidebar:hover { 
margin-left: 0px;
} 
 
.forAnimate { 
opacity: 0;
}
} 
 
@media (min-width: 1330px) { 
 
.main { width: calc(100% - 200px); 
margin-left: 200px;
} 
 
nav.sidebar { margin-left: 0px; float: left;} 
 
nav.sidebar .forAnimate { opacity: 1;}
}
 
nav.sidebar .navbar-nav .open .dropdown-menu&amp;gt;li&amp;gt;a:hover, nav.sidebar .navbar-nav .open .dropdown-menu&amp;gt;li&amp;gt;
a:focus {   
color: #CCC;    
background-color: transparent;
}
nav:hover .forAnimate { 
opacity: 1;
}
section {   
padding-left: 15px;
}</style>

Bước 3: Gọi thư viện Bootstrap

1	`<link` `rel="stylesheet"` `href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>`