Cách thêm menu di động đáp ứng trước chân trang trong Focus Pro

Trong nhóm Genesis Facebook, một người dùng đã viết:

Tôi đang sử dụng Studiopress Focus Pro trên trang web này. Tôi có tiện ích menu tùy chỉnh trong khu vực tiện ích con ở đầu trang bên phải… Tôi cũng có nó trong khu vực tiện ích con ở chân trang 1…

Điều đang xảy ra là menu đầu trang sẽ biến thành một chiếc bánh hamburger khi được xem trên một thiết bị nhỏ, tuy nhiên menu chân trang sẽ không…

Tôi đã thử thêm hỗ trợ menu trong tệp chức năng, nhưng không chắc mình đã làm đúng …

Tôi đang thiếu cái gì?

Hãy để chúng tôi đăng ký một tùy chỉnh ngoài các tùy chỉnh chính và phụ tiêu chuẩn và hiển thị nó trước chân trang bằng cách sử dụng móc hành động với độ sâu là 1 (để không hiển thị các menu phụ). Sau đó, chúng tôi sẽ điều chỉnh javascript để bao gồm menu chân trang này thêm một chút CSS để đảm bảo rằng các biểu tượng phông chữ mũi tên xuống không xuất hiện cho các mục menu có menu phụ trong menu chân trang tùy chỉnh của chúng tôi.Footer Navigation Menu genesis_before_footer

Bước 1

Thêm phần sau vào functions.php của Focus Pro :

// Add Theme Support for Genesis Menus
add_theme_support( 'genesis-menus', array(
'primary' => __( 'Primary Navigation Menu', 'genesis' ),
'secondary' => __( 'Secondary Navigation Menu', 'genesis' ),
'footer' => __( 'Footer Navigation Menu', 'genesis' ),
) );

// Hook menu before footer
add_action( 'genesis_before_footer', 'sk_custom_footer' );
function sk_custom_footer() {

printf( '<nav %s>', genesis_attr( 'nav-footer' ) );
wp_nav_menu( array(
'theme_location' => 'footer',
'container' => false,
'depth' => 1,
'fallback_cb' => false,
'menu_class' => 'genesis-nav-menu',
) );

echo '</nav>';

}

Bước 2

Tại Giao diện> Trình đơn> Quản lý Vị trí, hãy chỉ định menu bạn muốn hiển thị trong Menu Điều hướng Chân trang.

Bước 3

Thay thế toàn bộ mã trong js / responsive-menu.js bằng:

jQuery(function( $ ){

$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-footer .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

$(".responsive-menu-icon").click(function(){
$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-footer .genesis-nav-menu").slideToggle();
});

$(window).resize(function(){
if(window.innerWidth > 767) {
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-footer .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});

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

});

Bước 4

Trong style.css của Focus Pro , trong truy vấn phương tiện 767px, hãy thêm phần sau vào sau khối CSS:.genesis-nav-menu.responsive-menu > .menu-item-has-children::before

.nav-footer .genesis-nav-menu.responsive-menu > .menu-item-has-children::before {
		content: normal;
	}

Cập nhật vào Chủ nhật, 22/11/2015

Chuck hỏi:

Tôi hiểu tôi đã làm sai điều gì… Tôi có điều hướng trong tiện ích con 1, đó là lý do tại sao tôi không nghĩ rằng phương pháp của bạn đang hoạt động… khi tôi nhận ra rằng bạn không nhắm mục tiêu vào khu vực tiện ích… Tôi đã làm cho nó hoạt động… rất cảm ơn bạn vì điều đó…. có cách nào để làm cho điều này hoạt động trong khu vực tiện ích chân trang không?

Nếu bạn muốn menu tùy chỉnh được đặt trong khu vực tiện ích con Chân trang 1 có thể phản hồi trên thiết bị di động thay vì sử dụng menu chân trang mới, hãy làm theo các bước sau thay vì ở trên.

Bước 1

Thay thế toàn bộ mã trong js / responsive-menu.js bằng:

jQuery(function( $ ){

$( ".footer-widgets .menu" ).addClass( "genesis-nav-menu" );

$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .footer-widgets .menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

$(".responsive-menu-icon").click(function(){
$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .footer-widgets .menu").slideToggle();
});

$(window).resize(function(){
if(window.innerWidth > 767) {
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .footer-widgets .menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});

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

});

Bước 2

Chỉnh sửa style.css .

một sự thay đổi

.footer-widgets {
	background: #fff url(images/lines.png);
	background-size: 6px 6px;
	color: #999;
	clear: both;
	font-size: 14px;
	margin-bottom: 5px;
	padding: 60px 60px 16px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 310px;
}

.footer-widgets-1 {
	margin-right: 40px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

.footer-widgets .widget {
	margin-bottom: 24px;
}

đến

.footer-widgets {
	background: #fff url(images/lines.png);
	background-size: 6px 6px;
	color: #999;
	clear: both;
	font-size: 14px;
	margin-bottom: 5px;
	/*padding: 60px 60px 16px;*/
}

/*.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 310px;
}
.footer-widgets-1 {
	margin-right: 40px;
}
.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}
.footer-widgets-3 {
	float: right;
}
.footer-widgets .widget {
	margin-bottom: 24px;
}*/

b) Thêm

.nav-footer {
	overflow: hidden;
	margin-bottom: 5px;
}

.footer-widgets .widget {
	margin-bottom: 0;
}

.footer-widgets .widget ul > li::before {
	content: normal;
}

.footer-widgets .widget ul > li {
	border-bottom: none;
	margin: 0;
	padding: 0;
}

c) Trong truy vấn phương tiện 1160px, nhận xét hoặc xóa

.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.sidebar-primary {
		width: 250px;
	}

d) Trong truy vấn phương tiện 1023px, nhận xét hoặc xóa

.footer-widgets {
		padding: 40px 5% 16px;
	}

Lưu ý: Hai khu vực widget footer khác, Footer 2 và Footer 3 cũng sẽ rộng 100% với những thay đổi trên.