Hướng dẫn tạo Menu 3 cấp trong theme Flatsome

Tại sao cần Menu 3 cấp cho Website Shopping?

Khi danh mục sản phẩm của bạn đa dạng (ví dụ: Thời trang > Nam > Áo sơ mi), việc hiển thị phân cấp rõ ràng giúp khách hàng:

• Tiết kiệm thời gian: Tìm thấy sản phẩm cần thiết chỉ sau 1-2 lần di chuột.
• Tăng trải nghiệm người dùng (UX): Giao diện trông chuyên nghiệp và có tổ chức hơn.
• Giảm tỷ lệ thoát: Khách hàng dễ dàng bao quát toàn bộ hệ thống sản phẩm của website.

Bước 1: Thiết lập cấu trúc Menu trong WordPress

Trước khi can thiệp bằng Code, bạn cần thiết lập cấu trúc Menu chuẩn trong quản trị WordPress:

1. Truy cập Giao diện (Appearance) > Menu.
2. Kéo thả các mục menu theo 3 cấp bậc (Mục cha > Mục con > Mục cháu).

Bước 2: Thêm Custom CSS vào Theme Flatsome

Bạn hãy copy đoạn mã dưới đây và dán vào phần: Tùy biến (Customize) > Additional CSS hoặc file style.css của Child Theme.

.nav-dropdown>li.nav-dropdown-col {
display:block;
}
.nav-left .nav-dropdown {
padding:0;
}
.nav-right .nav-dropdown{
border-radius: 20px;
}
.nav-dropdown .nav-dropdown-col>a,.nav-dropdown li a {
font-size:15px;
font-weight:500;
}
.nav-dropdown-default>li:hover>a,.nav-dropdown .nav-dropdown-col>ul li:hover>a {
color:var(--primary-color);
}
.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a{
text-transform: inherit;
}
.nav-dropdown-default>li>a {
color: #1f2937;
border-bottom:0 !important;
}
.nav-dropdown-has-arrow li.has-dropdown:before {
border-width:10px;
margin-left:-10px;
}
.nav-dropdown .nav-dropdown-col>ul {
top: 0;
box-shadow:2px 2px 5px #828282;
display:none;
position:absolute;
left:100%;
z-index:9;
background:white;
min-width:240px;
}
.nav-dropdown>li.nav-dropdown-col {
display: block;
width: 100%;
border-right: 0;
position: relative;
}
.nav-dropdown .nav-dropdown-col>ul li a {
padding: 10px;
text-transform: none;
color: black;
}
.has-dropdown .nav-dropdown .nav-dropdown-col .icon-angle-down{
float: right;
transform: rotate(270deg);
}
.header-nav li.nav-dropdown-col:hover>ul {
display: block !important;
}
.nav-dropdown .nav-dropdown-col.current-menu-item > ul,
.nav-dropdown .nav-dropdown-col.current-menu-parent > ul,
.nav-dropdown .nav-dropdown-col.current-menu-ancestor > ul,
.nav-dropdown .nav-dropdown-col.active > ul,
.nav-dropdown .nav-dropdown-col.current-product_cat-ancestor > ul {
display: none !important; 
}
.nav-dropdown .nav-dropdown-col:hover > ul {
display: block !important;
}

Bước 3: Kiểm tra và tối ưu hóa

Sau khi lưu mã CSS, bạn hãy ra trang chủ của Website để kiểm tra:

1. Di chuột vào menu chính: Cấp 2 hiện ra.
2. Di chuột vào menu cấp 2: Cấp 3 sẽ bung sang bên phải (Flyout).
3. Tương thích Mobile: Lưu ý rằng menu 3 cấp này hoạt động tốt nhất trên Desktop. Với Mobile, Flatsome đã có cơ chế “Accordion” (xổ dọc) mặc định rất tốt, bạn không nên áp dụng CSS này cho bản Mobile để tránh vỡ giao diện.

Một số lưu ý nhỏ:

• Nếu website của bạn sử dụng tông màu khác, hãy thay đổi var(--primary-color) bằng mã màu hex (ví dụ: #ff0000) để đồng bộ thương hiệu.
• Độ rộng min-width: 240px có thể điều chỉnh tùy theo độ dài tên chuyên mục của bạn.

Hy vọng bài viết này sẽ giúp bạn làm chủ menu Flatsome và nâng cấp website của mình thêm chuyên nghiệp.

Bạn đang cần hỗ trợ chuyên sâu? 

Nếu bạn cần thiết kế website mới, chăm sóc nội dung chuẩn SEO, hoặc quản trị kỹ thuật để tối ưu hóa doanh thu cho website của mình, đừng ngần ngại liên hệ với tôi.

Hà Văn Thuật (Shopping Web) 

📞 Zalo: 0962682434 

🌐 Website: shoppingweb.vn

Tôi sẵn sàng hỗ trợ bạn biến website thành một cỗ máy bán hàng hiệu quả nhất!