Hướng dẫn tạo menu dọc với menu dọc ot flatsome năm 2024

OT Flatsome Vertical Menu là Plugin chuyên tạo Menu dọc đẹp dành riêng cho Theme Flatsome, Plugin này được phát triển bởi thinhbg59 một lập trình viên người Việt.

Plugin OT Flatsome Vertical Menu được dùng để tạo Menu dọc giống kiểu của Điện Máy Xanh, Thế Giới Di Động… giống như hình dưới đây nè:

Hình ảnh demo phía trên sử dụng Theme Flatsome, Plugin OT Flatsome Vertical Menu và Plugin Webico Slider Flatsome Addons

Nếu đã biết công dụng của Plugin này rồi thì vào vấn đề luôn nào, sau đây là hướng dẫn tải và cài đặt Plugin OT Flatsome Vertical Menu cho theme Flatsome:

Đầu tiên các bạn vào Plugin, chọn Cài mới, nhập từ khóa “OT Flatsome Vertical Menu” vào khung tìm kiếm, sau đó cài đặt và kích hoạt Plugin lên:

Tiếp theo các bạn tạo 1 menu, hoặc sử dụng menu hiện có trong Giao diện -> Menu, sau đó check vào tùy chọn thiết lập menu là Vertical Menu như hình phía dưới sau đó nhấn vào Lưu menu

Để hiển thị menu ra ngoài các bạn có thể vào Giao diện -> Tùy biến -> Chọn phần Header sau đó kéo Vertical Menu đến chỗ mà chúng ta muốn hiển thị rồi nhấn.

Để Menu dọc trong đẹp như hình thì bạn cần thêm ít CSS nha, đây là đoạn CSS giúp bạn tùy chỉnh độ rộng menu, màu sắc cơ bản:

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

# mega-menu-title {  
width: 240px;  
background: 
# fdd504; /*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: 240px;  
text-transform: uppercase;  
color:
# 000;  
}

# mega_menu a:hover {  
width: 240px;  
}

# menu-item-716.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-716 {  
width: 250px;  
}

# mega_menu.sf-menu.sf-vertical.sf-js-enabled.sf-arrows {  
width: 240px;  
}

# mega-menu-wrap.ot-vm-hover {  
width: 0px;  
}
.nav.header-nav.header-bottom-nav.nav-center.nav-uppercase {  
left: 10px;  
}  

# mega-menu-wrap{  
width:240px;  
background:
# fdd504;  
}

Và trong cài đặt, vẫn còn một số tùy chỉnh chọn hay bạn có thể vào đó để tùy chỉnh thêm: Chọn Cài đặt -> OT Flatsome Vertical

• Menu Title: Tùy tên của menu
• Event show: Tùy chọn kiểu hiển thị khi hành động với menu, có 2 kiểu là rê chuột vào tự hiện menu và click vào để show menu
• Show Overlay Background: Hiệu ứng làm mờ xung quanh, và nổi bật menu lên.
• Auto Show Sub in Homepage: Tự động show menu nếu đang ở trang chủ.
• Submenu Always At The Top: Làm đẹp phần Sub-menu.

Trên đây là một số cài đặt mà bạn có thể thử để tùy chính OT Flatsome Vertical Menu, nếu bạn có thắc mắc gì có thể bình luận ngay tại bài viết này.

Để 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.

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] <a href="tel:0935355881" class="demo-button"><img src="https://mywebsite.com.vn/wp-content/uploads/2021/12/icon-phone.png"> <p>Hotline</p></a> [/ux_html] [ux_html] <a href="https://zalo.me/0935355881" class="demo-button"><img src="https://mywebsite.com.vn/wp-content/uploads/2023/01/zalo.svg"> <p>Zalo</p></a> [/ux_html] [ux_html] <a href="#" class="demo-button"><img src="https://mywebsite.com.vn/wp-content/uploads/2023/02/demo-meno-button-stick-flatsome_1.webp"> <p>Support</p></a> [/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ẻ <a> (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ụ:

<a href=”#” class=”demo-button”><img src=”https://mywebsite.com.vn/wp-content/uploads/2023/02/demo-meno-button-stick-flatsome_1.webp“> <p>Support</p></a>

• Thay # → link liên kết của bạn.
• Thay https://mywebsite.com.vn/wp-content/uploads/2023/02/demo-meno-button-stick-flatsome_1.webp → link ảnh của bạn.
• Thay Support → văn bản hiển thị mà bạn muốn.

Bước 3 - Thêm CSS

Các bạn coppy toàn bộ đoạn CSS ở dưới, dán vào mục “CSS tùy chỉnh” trong “Tùy biến” hoặc mục “Custom CSS” trong “Advance” của theme Flatsome.

/Button menu sticky Flatsome by Huy Real Property/ .demo-wrapper{width: 70px;

overflow: hidden;
color: 

text-align: center;
padding: 0;
margin: 0;
position: fixed;
right: 5px;
top: 45%;
z-index: 25;

display: block;
transition: all .3s;
-webkit-transition: all .3s;
background-color: rgba(0,0,0,.4);
text-align: center;
padding: 5px;
border-radius: 3px;
margin-bottom: 3px;

margin-bottom: 0;
color: 

font-weight: bolder;
font-size: 11px;
line-height: 1.3;
text-transform: uppercase;

width: 32px;
margin-bottom: 3px;

background-color: 

transform: translateX(0);

Bước Cuối - Chọn Khu Vực Hiển Thị

Tùy thuộc vào việc bạn muốn menu button này xuất hiện ở một bài viết cụ thể, hoặc tất cả bài viết, hoặc toàn bộ trang web mà thực hiện như sau:

• Xuất hiện ở toàn bộ trang web: Các bạn copy lại đoạn Shortcode của Block đã tạo ở bước 1 -> Trong Flatsome, Chọn “advance” -> Dán đoạn Shortcode vào khung “FOOTER SCRIPTS” & lưu lại.

• 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.