3/1/2022 VPS, Hosting tốt nhất Việt Nam
Dịch vụ Hosting, VPS giá rẻ, chất lượng nhất tại Việt Nam, nhập mã giảm giá BHD10 để được giảm thêm 10%: Tại đây
3/1/2022 VPS nước ngoài tốt nhất
Đăng kí VPS giá rẻ tốt nhất nước ngoài và nhận ngay 100$ miễn phí: Tại đây

Tết Nguyên Đán 2022

00
Ngày
00
Giờ
00
Phút
00
Giây

Tạo menu dọc với Plugin OT Flatsome Vertical Menu

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.

Công dụng của Plugin OT Flatsome Vertical Menu

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è:

Plugin OT Flatsome Vertical Menu 2233

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

OT Flatsome Vertical Menu chỉ dành riêng cho Theme Flatsome thôi nha các bạn, nếu các bạn chưa biết theme flatsome là gì? Hay cách cài đặt của theme flatsome thì xin mời xem bài viết này: Hướng dẫn Cài Đặt Theme Flatsome Chi Tiết Từng Bước

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:

Tải và cài Plugin OT Flatsome Vertical Menu

Đầ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:

Plugin OT Flatsome Vertical Menu 2234
Hoặc bạn có thể cài đặt Plugin thủ công bằng cách tải Plugin tại đây: https://wordpress.org/plugins/ot-flatsome-vertical-menu/. Hướng dẫn cài đặt Plugin chi tiết xem tại đây: Plugin là gì? Cài đặt và phân loại và cách sử dụng an toà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

Plugin OT Flatsome Vertical Menu 2235

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

Plugin OT Flatsome Vertical Menu 2236

OT Flatsome Vertical Menu Nâng cao

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

Plugin OT Flatsome Vertical Menu 2238
  • 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.

Tác giả: Blog Hướng Dẫn

Chia sẻ:

Bài viết này hữu ích?

Click để đánh giá!

Đánh giá / 5. Số lượt đánh giá:

No votes so far! Be the first to rate this post.

We will be happy to hear your thoughts

      Leave a reply

      Blog Hướng Dẫn
      Logo