Mở Điều hướng chính và phụ của Genesis bằng một biểu tượng menu đáp ứng duy nhất

Các menu đáp ứng của Genesis (được cập nhật vào mùa hè 2014) thay đổi một chút theo từng chủ đề, nhưng hầu hết đều thêm một biểu tượng đáp ứng riêng biệt vào từng menu điều hướng ở kích thước màn hình nhỏ hơn. Điều này giữ cho mỗi menu điều hướng mở và đóng một cách độc lập.

Nhưng bạn có thể chỉ muốn có một biểu tượng menu đáp ứng để mở và đóng cả menu điều hướng chính và phụ cùng lúc trong chủ đề Genesis của bạn. Điều này rất hữu ích nếu bố cục của bạn có điều hướng chính được đặt ngay phía trên điều hướng phụ và đặc biệt là nếu bạn đang sử dụng điều hướng chính và phụ cho menu điều hướng phân tách có biểu trưng ở giữa (nav - logo - nav).

Menu đáp ứng được tạo bằng tệp jQuery - /js/responsive-menu.js - nằm trong thư mục chủ đề con. Đây là tệp mà bạn có thể chỉnh sửa hoặc thay thế để mở và đóng cả menu điều hướng chính và phụ cùng lúc.

Bắt đầu với Mã Executive Pro

Đáp ứng-menu.js mà hướng dẫn này bắt đầu đến từ các chủ đề con của Executive Pro (hoặc Enterprise Pro). Các chủ đề con này ban đầu thêm biểu tượng menu đáp ứng vào cả tiêu đề và điều hướng chính, nhưng không thêm vào điều hướng phụ.

Trong Executive Pro và Enterprise Pro, điều hướng phụ được chuyển đến chân trang. Để giữ nó ngay bên dưới điều hướng chính, bạn sẽ tìm và nhận xét (như được hiển thị) phần sau trong chủ đề con functions.php của bạn.

Di chuyển menu phụ trở lại bên dưới menu chính

<!--?php 
//* Do NOT include the opening php tag

/*
//* Reposition the secondary navigation menu
remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );
add_action( ‘genesis_footer’, ‘genesis_do_subnav’, 7 );

//* Reduce the secondary navigation menu to one level depth
add_filter( ‘wp_nav_menu_args’, ‘executive_secondary_menu_args’ );
function executive_secondary_menu_args( $args ){

if( 'secondary' != $args['theme_location'] )
return $args;

$args['depth'] = 1;
return $args;

}*/

Yêu cầu Tập lệnh Menu đáp ứng

Bạn cũng sẽ cần đảm bảo rằng responsive-menu.js được xếp vào hàng trong functions.php của bạn. Thêm hoặc chỉnh sửa những điều sau:
<?php //* Do NOT include the opening php tag

/* Edit (or add) the enqueue for the responsive menu /
//
Enqueue Scripts
add_action( ‘wp_enqueue_scripts’, ‘executive_load_scripts’ );
function executive_load_scripts() {

wp_enqueue_script( 'executive-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . 'https://g3f2z8v4.rocketcdn.me/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

}

Mã menu đáp ứng

Lưu ý rằng khi bạn đang sử dụng mã sau, bạn KHÔNG nên sử dụng menu tùy chỉnh trong khu vực tiện ích Header Right của mình. Mã khác sẽ được yêu cầu. Lưu phần sau thành /js/responsive-menu.js (Đổi tên tệp gốc trước.)
jQuery(function( $ ){
$(".genesis-nav-menu").addClass("responsive-menu");
$('&lt;div class="responsive-menu-icon"&gt;&lt;/div&gt;').insertBefore( '.nav-primary .genesis-nav-menu' );

$(".responsive-menu-icon").click(function(){
	$(".genesis-nav-menu").slideToggle();
	$(this).toggleClass("menu-open");
});

$(window).resize(function(){
	if(window.innerWidth &gt; 800) {
		$(".genesis-nav-menu, nav .sub-menu").removeAttr("style");
		$(".responsive-menu &gt; .menu-item").removeClass("menu-open");
	}
});

$(".responsive-menu &gt; .menu-item").click(function(event){
	if (event.target !== this)
	return;
		$(this).find(".sub-menu:first").slideToggle(function() {
		$(this).parent().toggleClass("menu-open");
	});
});

});

Giải thích về mã menu đáp ứng

Phần 1

$(".genesis-nav-menu").addClass("responsive-menu");
	$('<div class="responsive-menu-icon"></div>').insertBefore( '.nav-primary .genesis-nav-menu' );
Phần đầu tiên thêm lớp .responsive-menu cho tất cả các .genesis-nav-menu bộ chọn. Điều này để tất cả chúng sẽ sử dụng CSS menu đáp ứng. Phần này cũng thêm biểu tượng menu đáp ứng ngay trước điều hướng chính.

Phần 2

	$(".responsive-menu-icon").click(function(){
		$(".genesis-nav-menu").slideToggle();
		$(this).toggleClass("menu-open");
	});
Phần thứ hai thêm một lớp .menu-open cho từng menu .genesis-nav, cả .primary-nav và .secondary-nav, khi biểu tượng menu đáp ứng được nhấp, để cả hai menu đều được mở bằng một cú nhấp chuột . Cả hai đều sẽ sử dụng CSS để mở menu.

Phần 3

$(window).resize(function(){
		if(window.innerWidth > 800) {
			$(".genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});
Phần thứ ba là từ mã menu đáp ứng ban đầu. Nó loại bỏ các lớp menu đáp ứng được thêm vào ở kích thước màn hình lớn hơn. Đường này if(window.innerWidth > 800) {phải được điều chỉnh để có cùng chiều rộng (800) với chiều rộng cho truy vấn phương tiện có thêm biểu tượng menu đáp ứng trong style.css của bạn. Đối với Exectutive Pro, đây là @media only screen and (max-width: 800px) {.

Phần 3

Phần mã cuối cùng là từ mã menu đáp ứng ban đầu. Nó mở và đóng từng menu phụ khi một mục menu chính được nhấp vào.

Tất cả mã cũng có thể được sao chép từ GitHub Gist.

CSS được bao gồm trong chủ đề Enterprise Pro hoặc Executive Pro sẽ tiếp tục hoạt động với mã menu đáp ứng này.

Đây chỉ là một cách mà mã menu đáp ứng có thể được điều chỉnh để mở và đóng cả menu điều hướng chính và phụ bằng một biểu tượng menu đáp ứng duy nhất cho các chủ đề con của Genesis.