Bạn có muốn tạo biểu tượng bánh hamburger cho menu mega của mình không Divi ?
Divi sử dụng biểu tượng bánh hamburger để chuyển đổi menu chính của bạn trên thiết bị di động và một số kiểu tiêu đề như 'trượt trong' và 'toàn màn hình'.
Hôm nay chúng tôi sẽ hướng dẫn bạn cách sử dụng biểu tượng bánh hamburger để chuyển đổi menu lớn chỉ bằng một cú nhấp chuột. Đây là một giải pháp tuyệt vời cho các trang web có nhiều tùy chọn menu.
Biểu tượng bánh hamburger tránh sự lộn xộn của tiêu đề. Hơn nữa, bố cục 4 cột có tổ chức của menu mega cho phép người dùng tìm thấy những gì họ cần một cách nhanh chóng và hiệu quả.
khảo sát
Trước khi xem hướng dẫn này, chúng ta hãy xem kết quả mà chúng ta muốn đạt được.
Triển khai biểu tượng Hamburger với Divi
Chuyển menu của bạn thành menu lớn
Bạn phải là đầu tiên tạo một menu lớn hoặc thay đổi menu hiện tại của bạn thành menu lớn. Phần này khá đơn giản.
Từ bảng điều khiển wordpress, đi tới Xuất hiện> Menu.
Bấm vào Tạo menu mới, đặt tên cho menu của bạn rồi nhấp vào Tạo menu.
Đảm bảo bật thuộc tính menu Lớp CSS bằng cách nhấp vào tab Tùy chọn màn hình ở trên cùng bên phải của màn hình Menus và tích tắc Các lớp CSS.
Bây giờ bạn có thể thêm các mục menu của mình vào menu mới mà bạn đã tạo.
Đầu tiên, hãy thêm mục menu sẽ hoạt động như biểu tượng bánh hamburger. Mục menu này sẽ là thành phần chính của tất cả các mục menu khác.
Để tạo mục menu này, hãy tạo một liên kết tùy chỉnh với các thông số sau:
- URL: http // #
- Tiêu đề điều hướng: <div class = ”hamburger”>
- Các lớp CSS: mega-menu
URL chỉ đơn giản là một thẻ bắt đầu bằng # (#) vì mục menu này sẽ không liên kết đến một trang nhất định. Chúng tôi sẽ sử dụng mục menu này để triển khai menu lớn của chúng tôi trong một cú nhấp chuột.
Lớp CSS “menu mega” là thứ triển khai chức năng menu lớn. Lớp CSS này chỉ nên được áp dụng một lần cho mục menu mẹ chính và cho bất kỳ mục nào trong số các mục con.
Bây giờ đã đến lúc thêm các mục menu sẽ tạo nên menu lớn của bạn.
Bây giờ sắp xếp / kéo bốn mục menu (mỗi mục có ba mục phụ của riêng chúng) để trở thành các mục phụ của liên kết Mega Menu chính.
Khi bạn sắp xếp xong menu, hãy nhớ kiểm tra Thực đơn chính dưới Cài đặt menu và nhấp vào Lưu trình đơn
Đã thêm jQuery để hiển thị menu khi nhấp chuột và không hiển thị khi di chuột
Bây giờ menu mega của bạn đã được tạo, chúng ta cần thêm một số jQuery để menu mega của chúng ta hiển thị khi bạn nhấp vào biểu tượng thay vì di chuột qua nó (là mặc định).
Để làm điều này, hãy truy cập Divi > Tùy chọn chủ đề > Tích hợp
Thêm tập lệnh sau vào phần "Thêm dòng mã vào <head> của blog của bạn » :
<script>
/*** Open menu itmes with children on click not hover ***/
(function($) {
jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();
jQuery(this).parent().toggleClass('show-submenu');
});
});
jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});
})(jQuery);
</script>
Thêm CSS tùy chỉnh
Khi bạn đang ở trong các tùy chọn chủ đề, hãy chuyển đến tab Chung
Di chuyển đến 'Tùy chỉnh CSS' và dán CSS bên dưới rồi nhấp vào 'Lưu thay đổi' :
/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }
/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }
/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
a{display:none;}
#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}
/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}
/*** show hamburger icon ***/
.hamburger:before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0.6em;
text-transform: none;
speak: none;
position: relative;
cursor: pointer;
top: 0;
left: 0;
vertical-align: -11px;
padding-right: 3px;
font-size: 32px; /*change size of icon here*/
content: "61"; /*change icon here*/
color: #333; /*change color of icon here*/
}
/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
content: "4d"; /*change x icon here*/
}
Nó được thực hiện!
Kết quả
Hãy quan sát kết quả ở cuối các bước này.
Tải xuống DIVI ngay bây giờ !!!
Phản ứng nhanh nhẹn?
Mega menu chỉ hoạt động trên kích thước màn hình lớn hơn 980 pixel. Đối với kích thước màn hình dưới 980px (máy tính bảng và điện thoại thông minh), menu sẽ chuyển sang chế độ menu di động theo mặc định.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Nếu bạn thích mega menu và đang tìm cách tạo ra một thiết kế gọn gàng và tối giản cho tiêu đề của mình, thì việc thêm biểu tượng bánh hamburger để hiển thị menu mega là một giải pháp tuyệt vời.
Giờ đây, người dùng của bạn có thể xem tất cả các liên kết điều hướng của bạn cùng một lúc chỉ với một cú nhấp chuột. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
