Menu bootstrap đa cấp

Thẻ.

• Tạo menu
• Trình đơn thả xuống
• Bootstrap
• trình đơn khởi động
• Mega menu
• Menu lớn Bootstrap

Bootstrap    Xem [6155]   Học thiết kế web

Bước 1. Tạo cấu trúc HTML cho menu

 
 
 
  Cách tạo Menu Dropdown nhiều cột bằng Bootstrap 
   
   
 
     Toggle navigation    
      
   
 
   
 
    
 
     
 Menu 1 column  
      
 
       
Link 1
       
 
       
Link 2
       
 
       
Link 3
       
 
        
       
Link 4
       
 
       
Link 5
       
 
      
 
     
 
     
 Menu 2 column  
      
 
       
 
        
 
         
 
          
Link 1
          
 
          
Link 2
          
 
          
Link 3
          
 
           
          
Link 4
          
 
          
Link 5
          
 
         
 
        
 
        
 
         
 
          
Link 1
          
 
          
Link 2
          
 
          
Link 3
          
 
           
          
Link 4
          
 
          
Link 5
          
 
         
 
        
 
       
 
      
 
     
 
     
 Menu 3 column  
      
 
       
 
        
 
         
 
          
Link 1
          
 
          
Link 2
          
 
          
Link 3
          
 
           
          
Link 4
          
 
          
Link 5
          
 
         
 
        
 
        
 
         
 
          
Link 1
          
 
          
Link 2
          
 
          
Link 3
          
 
           
          
Link 4
          
 
          
Link 5
          
 
         
 
        

  

 
        
 
         
 
          
Link 1
          
 
          
Link 2
          
 
          
Link 3
          
 
           
          
Link 4
          
 
          
Link 5
          
 
         
 
        
 
       
 
      
 
     
 
     
Link
     
 
    
 
   
 
  
 

Bước 2. Định dạng CSS

.dropdown-menu {	
min-width: 200px;
}
.dropdown-menu.columns-2 {	
min-width: 400px;
}
.dropdown-menu.columns-3 {	
min-width: 600px;
}
.dropdown-menu li a {	
padding: 5px 15px;
}
.multi-column-dropdown {	
list-style: none;	
padding-top: 5px;	
padding-right: 0px;	
padding-bottom: 5px;	
padding-left: 0px;
}
.multi-column-dropdown li a {	
display: block;	
clear: both;	
line-height: 1.428571429;	
color: #333;	
white-space: normal;	
padding-top: 5px;	
padding-right: 15px;	
padding-bottom: 5px;	
padding-left: 15px;
}
.multi-column-dropdown li a:hover {	
text-decoration: none;	
color: #262626;	
background-color: #f5f5f5;
} 
@media [max-width: 767px] { 
.dropdown-menu.multi-column { 
min-width: 240px !important; 
overflow-x: hidden;
}
}

Bước 3. Call library Bootstrap

Bước 4. Call library JQUERY