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

Hướng dẫn tạo menu rớt xuống bằng Bootstrap

Bước 1: Dùng HTML định nghĩa cấu trúc menu

 
  
  
 HOCWEBGIARE.COM   
   
   
      Trang chủ 
    
      Khóa học 
    
      Hỏi đáp 
    
      Blog New 
    
      Dịch vụ 
    
      Đồ án 
    
   
   
   
 Giới thiệu  
    
     hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể.

Bước 2: Dùng HTML định nghĩa nội dung trang web

 
  
   
    
       
     
    
    
     Chào mừng Bạn đến với website hocwebgiare.com

Bước 3: Định nghĩa CSS

 
 
body {	background-color:#F90;}
.p-set {	padding-top:120px;	line-height:30px;	color:#fff;	font-size:16px;}
.hr-set {	border-top:1px solid rgba(0, 0, 0, 0)!important;	
margin-bottom:20px;
}
.hr-set-two {	border-top:1px solid rgba(0, 0, 0, 0.05)!important;	
margin-bottom:5px;
}


#side-menu {	height:100%;	
position:fixed;	
top:-1000px;	
left:-250px;	
background-color:#CF2545;	
color:#fff;	
z-index:999;	
overflow:auto;	
max-width:500px;
}

#side-menu ul {	list-style:none;	padding:0px;}
#side-menu ul li {	border-bottom:1px solid rgba(95, 87, 88, 0.2);	
padding: 20px 25px;	display:inline-block;}

#side-menu ul li a i {	padding-right:10px;}
#side-menu ul li a, 
#side-menu ul li a:hover {	color:#fff;	text-decoration:none;	font-size: 16px;}
.logo-text {	padding: 20px 30px;	cursor: pointer;	font-size:20px;	font-weight:900;}

.menu-close-icon {	padding:0px 10px;	cursor: pointer;	color:#000;	font-size:25px;}
.menu-open-icon {	cursor:pointer;	color:#fff;	padding:20px 30px;	padding:20px 25px;	position:fixed;}
.intro-txt {	padding:20px;}

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

Bước 5: Gọi thư viện JQUERY

Bước 6: Tạo hiệu ứng cho menu bằng JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất