CSS Tạo Menu Đa Cấp Cho Website WordPress Theme Flatsome 2024

Nhiều bạn làm quen với WordPress thì Theme Flatsome là một trong những theme đang được sử dung rất phổ biến nhất hiện nay. Tuy nhiên, giao diện này có một nhược điểm là phần menu đa cấp thiết kế chưa thực sự ưu việt. Khi bạn tạo menu có 2 cấp con trong Flatsome thì nó sẽ ở dạng ngang.

Trong bài viết này, mình sẽ hướng dẫn các bạn sửa CSS tạo menu đa cấp WordPress Flatsome có thể hiển thị đẹp hơn, hoặc cơ bản là làm cho nó hiển thị kiểu vertical menu như bình thường chúng ta hay sử dụng nhé!

Bước 1: Menu Đa Cấp Cho Website WordPress Theme Flatsome

1. Truy cập vào Giao diện > Menus trong bảng điều khiển WordPress.
2. Tạo menu mới hoặc chỉnh sửa menu hiện có.
3. Kéo các mục menu con và thả chúng vào bên dưới mục cha để tạo menu đa cấp.
4. Lưu lại menu.

Bước 2: Thêm CSS vào tùy chỉnh CSS trên theme Flatsome:

Nếu muốn thêm hoặc chỉnh sửa kiểu dáng cho menu đa cấp, bạn có thể thêm CSS tùy chỉnh vào Flatsome. Để làm điều này:

1. Truy cập vào  Flatsome > Advanced > Custom CSS > ALL SCREENS
2. Thêm đoạn CSS sau để tùy chỉnh menu đa cấp:

/*
Css menu đa cấp cho Flatsome
*/
.nav-dropdown-default {
    padding: 0px;
}
.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
    font-size: 15px;
}
@media (min-width: 850px){
    header#header .nav-dropdown {
        display: block;
    }
    header#header .nav-dropdown ul.sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        background: #fff;
        width: 250px;
        padding: 0;
        display: none !important;
        border-radius: 5px;
        -webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
        box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
    }
    header#header .nav-dropdown ul.sub-menu a {
        white-space: normal;
        margin: 0;
        padding: 10px 15px;
        border: 0;
        font-weight: 400;
    }
    header#header .nav-dropdown li:hover > ul.sub-menu{
        display: block !important;
    }
    header#header .nav-dropdown li {
        border-right: 0;
        white-space: normal;
        width: 100%;
        display: block;
        position: relative;
    }
    header#header .nav-dropdown li.menu-item-has-children > a {
        font-weight: 400;
        text-transform: none;
        color: rgba(102,102,102,.85);
    }
    header#header .nav-dropdown li.active>a {
        color: #e82c2a;
    }
}

/* Thêm mũi tên xuống ở cuối mục menu đa cấp */
.menu-item-has-children.nav-dropdown-col::after {
    content: "\25BC"; 
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}
/* Thay đổi mũi tên khi mở submenu (hoặc hover) */
header#header .nav-dropdown li.menu-item-has-children {
    position: relative;
}

header#header .nav-dropdown li.menu-item-has-children > a::after {
    content: "\25B8";
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #333; /* Màu mũi tên */
}
/* Khi hover vào mục có submenu, mũi tên sẽ xoay xuống */
header#header .nav-dropdown li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(90deg);
}
/* Mũi tên phải cho các submenu con */
header#header .nav-dropdown li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > a::after {
    content: "\25B8";
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #333;
}

/* Khi hover vào submenu con, mũi tên xoay để chỉ submenu con mở */
header#header .nav-dropdown li.menu-item-has-children > ul.sub-menu li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(90deg);
}

Giải thích:

• content: “\f105”: Đây là mã của Font Awesome cho icon chevron-right.
• font-family: “Font Awesome 5 Free”: Quy định sử dụng font Font Awesome để hiển thị icon.
• transform: rotate(90deg): Xoay mũi tên khi hover vào mục menu cha, chỉ rằng submenu được mở.

Kết quả:

• Các mũi tên sẽ nhỏ gọn và được căn sát mép phải của mục menu.
• Khi bạn hover vào menu cha, mũi tên sẽ xoay xuống để báo hiệu submenu đang mở.

Bước 3: Kiểm tra hiển thị và tùy chỉnh thêm

Sau khi thêm CSS, hãy kiểm tra lại trang của bạn và xem cách menu đa cấp hoạt động. Nếu muốn điều chỉnh thêm về màu sắc, độ rộng, hoặc các hiệu ứng khác, bạn có thể điều chỉnh các thuộc tính trong mã CSS.

Bạn có thể tùy chỉnh màu sắc, kích thước của mũi tên theo ý thích bằng cách điều chỉnh các thuộc tính như font-size hoặc color trong đoạn CSS trên.

Bài viết liên quan

Ẩn thanh Admin bar ngoài Front-end WordPress đơn giản nhất 2024

Code chèn nội dung quảng cáo vào giữa bài viết trong wordpress