Người Viết : ViKiMi Editor

Thực hiện tạo một Menu tuỳ chỉnh theo cách bạn muốn / Tạo Mega Menu với Bootstrap!
Khi nói đến thiết kế của Website, chắc hẳn một Menu chuẩn có thể áp dụng ở mọi nơi là điều không thể thiếu. Menu được thiết kế chuẩn có thể xuất hiện ở bất kỳ vị trí nào. Menu như vậy không chỉ xuất hiện ở Header, mà nó còn có thể xuất hiện ở Footer, phần nội dung phụ etc… Menu được thiết kế chuẩn là điều quá dễ dàng với Bootstrap, Bootstrap có thể giúp bạn chuyển những Menu cũ kỹ trước kia thành những Menu ưng ý.
Một Menu có thể thu gọn trên các thiết bị nhỏ, đó chính là điều Bootstrap hỗ trợ bạn làm thật dễ dàng. Menu có khả năng thu nhỏ giúp cho nó có thể hiển thị trên nhiều thiết bị với những thiết kế có thể tuỳ chỉnh. Nếu bạn muốn có một Menu có thể tuỳ chỉnh như vậy.
Tại sao không làm với Bootstrap? Bootstrap giúp bạn chuyển những Menu cũ chỉ có HTML & CSS thành những Menu mới hơn khả tương thích cao. Đối với những Menu đẹp mắt như Mega Menu bạn hoàn toàn có thể biến hoá nó để có thể sử dụng khắp nơi. Quan trọng là có thể tự thiết kế Menu theo cách riêng.
Tất cả đều có thể cải tiến cùng Bootstrap để Menu hiện đại & đẹp mắt.
EXAMPLE :
Đây là một Ví dụ về Mega Menu được sử dụng cùng BOOTSTRAP để có một Menu tốt hiển thị nhiều thiết bị.
Mã HTML : Sử dụng HTML & các Class được cung cấp bởi Bootstrap.
<Nếu bạn muốn tham khảo rõ hơn về cách sử dụng các Bootstrap Classes để tạo Menu. Hãy tìm kiếm các tạo Menu với Bootstrap trực tiếp trên Website>
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Technical SUPPORT</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <div class="menu_navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#HotTrend">Hot Trends</a> <div class="menu_dropdown"> <button class="menu_dropbtn">Tin Ngôi Sao <i class="menu_fa menu_fa-caret-down"></i> </button> <div class="menu_dropdown-content"> <div class="menu_header"> <h2>Tin tức mới về Tuyển Việt Nam</h2> </div> <div class="menu_row"> <div class="menu_column"> <h3>Huấn Luyện Viên</h3> <a href="#">Park Hang Seo</a> <a href="#">Gong Oh-Kyun</a> <a href="#">Nguyễn Anh Đức</a> <a href="#">Mai Đức Chung</a> <a href="#">Alfred Riedl</a> </div> <div class="menu_column"> <h3>Cầu Thủ Đội Tuyển</h3> <a href="#">Nguyễn Công Phượng</a> <a href="#">Nguyễn Văn Toàn</a> <a href="#">Nguyễn Tuấn Anh</a> <a href="#">Lương Xuân Trường</a> </div> <div class="menu_column"> <h3>Các Giải Đấu Của Tuyển</h3> <a href="#">World Cup 2022</a> <a href="#">AFC Cup 2021 </a> <a href="#">AFF Cup 2022 </a> <a href="#">Hưng Thịnh Cup 2022 </a> </div> </div> </div> </div> </ul> </div> </div> </div> </nav>
Mã CSS : Đây là Mã CSS để tạo ra một Mega Menu
<style> /* Navbar container */ .menu_navbar { margin-bottom: 0.1%; overflow: hidden; background-color: #333; font-family: Arial; } /* Links inside the navbar */ .menu_navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .menu_dropdown { float: left; overflow: hidden; } /* Dropdown button */ .menu_dropdown .menu_dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover */ .menu_navbar a:hover, .menu_dropdown:hover .menu_dropbtn { background-color: red; } /* Dropdown content (hidden by default) */ .menu_dropdown-content { display: none; position: absolute; background-color: transparent; width: 100%; padding: 0 4.5455%; left: 0; z-index: 1; } /* Mega Menu header, if needed */ .menu_dropdown-content menu_.header { background: red; padding: 16px; color: white; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /* Show the dropdown menu on hover */ .menu_dropdown:hover .menu_dropdown-content { display: block; } /* Create three equal columns that floats next to each other */ .menu_row{ width:100%; background-color: #ccc; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .menu_column { float: left; width: 33.33%; padding: 10px; background-color: #ccc; height: 350px; } /* Style links inside the columns */ .menu_column a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } /* Add a background color on hover */ .menu_column a:hover { background-color: #ddd; } /* Clear floats after the columns */ .menu_row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 55em) { .menu_column { width: 100%; height: auto; } .menu_dropdown-content { display: none; position: absolute; background-color: transparent; width: 100%; padding: 0% !important; left: 0; z-index: 1; } } </style>
KẾT QUẢ :

NHƯ VẬY, BẰNG CÁCH NÀY
Bạn có đã có một Mega Menu được tạo ra bằng cách sử dụng Bootstrap & Những cách tạo Mega Menu cơ bản. Sự kết hợp này đem lại một Menu rất đơn giản nhưng hiệu quả cao. Đặc biệt khi được sử dụng cũng với Data được lấy từ Cơ Sở Dữ Liệu. Tạo nên một Website động có khả năng thiết kế tốt cho người dùng. Có nhiều cách tuy chỉnh để thiết kế Menu, và sử dụng Bootstrap cho mục đích này giúp có một Menu thực sự tốt.