Menu bootstrap đa cấp
Ngày đăng:
13/12/2022
Trả lời:
0
Lượt xem:
149
Tất cả các bài viết. BootstrapBước 1. Tạo cấu trúc HTML cho menu
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
Bootstrap Xem (6155) Học thiết kế web Bước 1. Tạo cấu trúc HTML cho menu
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 |