Tất cả bài viết | Bootstrap
Hướng dẫn tạo Menu Dropdown nhiều cột bằng Bootstrap
Trong bài thực hành học thiết kế web bằng Bootstrap này các Bạn sẽ được hướng dẫn tạo Menu Dropdown nhiều cột bằng Bootstrap.
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
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: Gọi thư viện Bootstrap
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (7799) Học thiết kế web giá rẻ
