Nếu có bạn nào muốn làm menu dọc thì tìm đúng cái rồi đấy. OT Flatsome là một addon rất mạnh trong việc tạo và thêm icon menu cho Flatsome. Trong bản thông báo của Flatsome thì chỉ có Ubermenu – Plugin tính phí được flatsome đưa ra để tương thích với việc tùy biến, thêm mới menu. Tuy nhiên, ở VN, các anh em làm Flatsome cũng có thể tạo ra một sản phẩm ngon không kém mà còn Free. Hiện tại Plugin OT Flatsome addon cũng có bản tính phí với tính năng Megamenu và thêm shortcode để chèn tùy ý vào các vị trí.

XEM VIDEO HƯỚNG DẪN:

Hướng dẫn sử dụng OT Flatsome Vertical Menu

Các bạn cứ xài theo quy chuẩn thôi. Vào Plugin/Cài mới. Gõ OT Flatsome Vertical Menu và cài đặt. Chờ hoàn tất rồi kích hoạt.

Để sử dụng, bạn vào phần Tùy biến/Header.

Trên phần Header, nó sẽ có phần Vertical menu đỏ. Bạn kéo nó xuống vị trí cần đặt. Lưu lại.

Bây giờ sẽ đến phần tạo menu. Các bạn sẽ tạo menu danh mục sản phẩm, hoặc danh mục ngành hàng, dịch vụ của mình. Rồi thêm vào menu như bình thường.

Chú ý: Trong phần tạo menu, bạn chú ý thêm phần ICON như hình dưới đây. Nhấp vào Select để lựa chọn.

icon OT Flatsome Vertical Menu

Mục Icon này có nhiều tùy chọn. Các bạn có thể sử dụng hình ảnh SVG, font Awesome, …

Tùy nhu cầu và khả năng mà các bạn có thể chọn một loại phù hợp là được. Ở đây mình hay dùng ảnh png nên mình tích vào Image. Khi nhấp Select và chọn hình ảnh chèn vào. Nó sẽ hiện trên ngay menu hình ảnh bạn chọn (Có thumbnail). Sau đó lưu lại. Và tận hưởng thành quả thôi.

Vì cái mặc định của thằng OT Flatsome Vertical Menu có cái chiều rộng menu dọc hơi bị dài. Với lại không cho phép chỉnh màu nền với bản Free này. Dưới đây mình có đoạn code cho các bạn chỉnh sửa.

/*Menu dọc chỉnh chữ*/

mega-menu-title {

width: 250px; background:

f63345; /*Màu nền danh mục SP chèn mã màu khác tại đây*/

text-transform: uppercase; }

mega-menu-title {

width: 250px; text-transform: uppercase; }

mega_menu a:hover {

width: 250px; }

menu-item-716.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-716 {

width: 245px; }

mega_menu.sf-menu.sf-vertical.sf-js-enabled.sf-arrows {

width: 250px; }

mega-menu-wrap.ot-vm-hover {

width: 0px; }

.nav.header-nav.header-bottom-nav.nav-center.nav-uppercase { left: 10px; }

mega-menu-wrap{

width:250px; background:

ed1c24;

}

Cứ copy y nguyên như trên vào Custom CSS rồi lưu lại. Phần code này đã giải quyết hết các phần co lại gồm submenu của menu dọc và cả phần co lại của menu ngang ngay bên cạnh cho hiển thị bắt mắt.

Nếu bạn đã làm với Flatsome thì sẽ biết menu có 2 cấp con trong flatsome sẽ ở dạng ngang. Hôm nay mình sẽ chia sẻ css để cho nó về dạng dọc bình thường nhé

Rất đơn giản, bạn chỉ cần thêm css sau vào menu Flatsome > Advanced > Custom CSS > ALL SCREENS

/ Css menu đa cấp cho Flatsome Author: levantoan.com / @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;

}

}

Chúc các bạn thành công!

Để các bạn dễ hình dung, mình đã demo trực tiếp menu button chạy dọc website ngay tại bài viết này để các bạn tham khảo, trải nghiệm.

Tạo menu button chạy dọc website – Flatsome

Và ngay sau đây, sẽ là bài hướng dẫn chi tiết để các bạn ai cũng đều có thể thực hiện được.

Bước 1 - Tạo Đoạn HTML Với Block

Các bạn chọn UX Blocks -> Thêm mới -> Đặt tiêu đề bất kỳ -> Chọn trình soạn thảo văn bản -> dán toàn bộ đoạn html bên dưới vào

[ux_stack direction="col" gap="0.15" class="demo-wrapper" visibility="hide-for-small"] [ux_html]

Hotline

[/ux_html] [ux_html]

Zalo

[/ux_html] [ux_html]

Support

[/ux_html] [/ux_stack]

Bước 2 - Chỉnh sửa lại thông tin button

Các bạn chú ý trong đoạn html trên, mỗi đoạn thẻ (ví dụ dòng 4-5, 9-10, 14-15), bạn sẽ thay đổi tương ứng thành thông tin của bạn, mình lấy ví dụ:

• Menu button xuất hiện ở toàn bộ bài viết: Các bạn cũng copy đoạn Shortcode của Block lại, Chọn “Tùy biến” -> “Blog” -> “Blog Single Post” -> Kéo xuống dưới cùng & dán Shortcode vào mục “HTML after blog posts“.
• Xuất hiện ở bài viết cụ thể: Tại bài viết đó, các bạn chọn “Add elements” -> Chọn “Block” -> Tại danh mục blocks có sẵn, các bạn chọn block đã tạo ở bước 1, và update.

Xong cuôi các bạn refresh lại trang để xem thành quả.

Trong quá trình thực hiện, có thắc mắc nào, các bạn có thể để lại comment cho mình phía dưới bài viết.