css 如何在其他Genesis主题中添加News Pro的移动响应菜单

Posted 2021-05-13

// August 15, 2014 by Sridhar Katakam 
// Step 1 - Upload news-pro/js/responsive-menu.js (mirror) to {child theme directory}/js 
// (create ‘js’ if not existing).
// Ex.: wp-content/themes/genesis-sample/js/responsive-menu.js
// Step 2
<?php
//* Do NOT include the opening php tag
//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );
function load_custom_scripts() {
	wp_enqueue_script( 'news-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );
}

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	/*border-bottom: 1px solid #e3e3e3;*/
	cursor: pointer;
	display: none;
	margin-bottom: -1px;
	text-align: center;
}

.site-header .responsive-menu-icon {
	border-bottom: none;
}

.responsive-menu-icon::before {
	color: #000;
	content: "\f333";
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
}
.nav-primary .responsive-menu-icon::before {
	color: #fff;
}

@media only screen and (max-width: 600px) {

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}

	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}

	.genesis-nav-menu.responsive-menu .menu-item {
		margin: 0;
	}

	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}

	.genesis-nav-menu.responsive-menu li.current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover {
		background: none;
		border: none;
		color: #000;
		display: block;
		line-height: 1;
		padding: 20px;
		text-transform: none;
	}
	.nav-primary .genesis-nav-menu.responsive-menu li.current-menu-item > a,
	.nav-primary .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
	.nav-primary .genesis-nav-menu.responsive-menu li a,
	.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
		color: #fff;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}

	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f132";
		float: right;
		font: normal 16px/1 'dashicons';
		height: 16px;
		padding: 18px 20px;
		right: 0;
		text-align: right;
		z-index: 9999;
	}
	.nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		color: #fff;
	}

	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f460";
	}

	.genesis-nav-menu.responsive-menu .sub-menu {
		background-color: rgba(0, 0, 0, 0.05);
		border: none;
		left: auto;
		opacity: 1;
		position: relative;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 100%;
		z-index: 99;
	}

	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		margin: 0;
	}

	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		background: none;
		border: none;
		padding: 20px;
		position: relative;
		text-transform: none;
		width: 100%;
	}

}