Người Viết : ViKiMi Editor

Những trang web muốn thực sự Hoàn thiện các chức năng người dùng buộc lòng phải có một hoặc nhiều Menu được sắp xếp thuật lợi nhất theo cách người dùng mong muốn, sao cho càng thuận lợi cho cách di chuyển của thao tác người dùng trên website càng tốt.
Những lựa chọn tối ưu nhất phải thật thân thiện và hiện đại. Hiện nay, hầu hết các website đều sử dụng Mega Menu. Và đây là dạng menu được ưu tiên nhiều trong việc xây dựng một website.
Trong bài giới thiệu về Mega Menu dành cho các website wordpress , chúng ta đã thấy tác dụng và cách dễ dàng có mega menu với một Plugin wordpress. Để có thể nắm rõ hơn về cách thiết kế Mega menu thì trong bài viết này sẽ được nói rõ hơn cách tạo một Mega menu cơ bản nhất.
THỰC HIỆN TẠO MỘT MEGA MENU DROPDOWN SẼ XUẤT HIỆN KHI NGƯỜI DÙNG HOVER CHUỘT TRÊN THANH MENU CỦA WEBSITE.
+ Chúng ta sử dụng một thẻ Div ( là : <Div class = ‘Menu-contents’>) làm khung chứa cho nội dung của Menu; Div này sẽ là phần Menu Dropdown, phần thẻ Div này sẽ chứa các lưới cột (Grid Columns) và các link được thiết kế trong Menu Dropdown.
+ Sử dụng Một Div lớn để bao quanh một <Button> và Phần tử Div làm khung chứa ở trên, nhằm thực hiện định vị trí cho Mega Menu chính xác với CSS.
Chúng ta có đoạn Mã code với HTML :
<div class="navigationbar">
<a href="#TrangChu">Home</a>
<a href="#TinTuc">News</a>
<a href="#HotTrend">Hot Trends</a>
<div class="MegaMenuDrop-down">
<button class="btnStars">Tin Ngôi Sao
<i class="icon-Dropdowns"></i>
</button>
<div class="MegaMenu-content">
<div class="TitleMegaMenu">
<h2>Tin tức mới về Tuyển Việt Nam</h2>
</div>
<div class="row">
<div class="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>
</div>
<div class="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="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>
</div>
Để có thể tạo Một Mega Menu hoàn thiện thì chúng ta cần thêm đoạn Mã CSS để thực hiện định vị cho Menu một cách hoàn thiện nhất.
Chúng ta cần biết thêm :
CSS OVERFLOW giúp kiểm soát nội dung quá lớn để nó thể nằm vứa trong một vùng chứa. Và chúng ta cũng biết Mega Menu là một Menu lớn.
Thuộc tính Overflow cho phép bạn chỉ định một trong 2 khả năng đó là chỉ định cắt nội dung hoặc chỉ định thanh cuộn để nội dung quá lớn có thể chứa vừa trong vùng chứa.
Các giá trị của thuộc tính CSS Overflow :
+ Visible được đặt là mặc định Default. Có nghĩa là khi đó nội dung không được cắt bớt. Nội dung được hiển thị ra bên ngoài vùng chứa.
+ Hidden là nội dung sẽ bị cắt bớt và phần tràn ra khỏi vùng chứa sẽ bị cắt bớt không hiển thị.
+ Scroll là phần tràn sẽ bị cắt bớt và thanh cuộn sẽ được thêm vào để cho phép người dùng kéo thanh cuộn để xem toàn bộ nội dung.
+ Auto thì tương tự như Scroll nhưng nó chỉ thêm thanh cuộn khi cần thiết.
Lưu ý : thuộc tính Overflow chỉ hoạt động với phần tử khối Blocks được chỉ định chiều cao.
Chúng ta có đoạn mã CSS cho Mega Menu:
.navigationbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Đoạn CSS định nghĩa cho các link liên kết <a> trong Div class= ‘navigationbar’ */
.navigationbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* CSS định nghĩa cho Div có class= ‘MegaMenuDrop-down’ */
.MegaMenuDrop-down {
float: left;
overflow: hidden;
}
/* CSS cho button Stars */
.MegaMenuDrop-down .btnStars {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
/* Thêm màu nênd đỏ khi Link<a> được hover */
. navigationbar a:hover, .MegaMenuDrop-down:hover .btnStars {
background-color: red;
}
/* Định nghĩa CSS cho Div class=’ MegaMenu-content’ là không hiển thị với display có giá trị none */
.MegaMenu-content {
display: none;
position: absolute;
background-color: transparent;
width: 100%;
padding: 0 4.5455%;
left: 0;
z-index: 1; /*Chỉ số Z-index trong CSS*/
}
/* Định nghĩa CSS cho phần TitleMegaMenu có cấu trúc như là .MegaMenu-content .TitleMegaMenu */
.MegaMenu-content .TitleMegaMenu {
background: red;
padding: 16px;
color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Hiển thị phần Megamenu : Thẻ Div có Class= ‘.MegaMenu-content’ được hiển thị khi Thẻ Div có Class = ‘.MegaMenuDrop-down’ được chuột Hover qua. Chú ý là : Mặc định Thẻ Div có Class= ‘.MegaMenu-content’ luôn được cho ẩn đi, không hiển thị, Cái này đã được định nghĩa ở phần trên với display là none */
.MegaMenuDrop-down:hover .MegaMenu-content
{
display: block;
}
/* Định nghĩa cho các Rows và Colums*/
.row{
width:100%;
background-color: #ccc;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 350px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Xoá các khoảng trống thừa có phía sau class ‘.row’, các khoảng trống này sẽ được thay thể bằng nội dung là “” để Row hiển thị nội dung chứa bên trong đúng ý đồ thiết kế. Các khoảng trống không cần thiết trong CSS luôn được xoá đi.*/
.row:after {
content: "";
display: table;
clear: both;
}

/* Thực hiện Tính hiển thị trên các thiết bị khác nhau như Điện Thoại, Desktop, Table … cho Mega Menu – Phần code CSS ở dưới để phù hợp với các màn hình thiết bị nhỏ hơn 600 Px, chẳng hạn như Điện Thoại, Table loại nhỏ .*/
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
