css PureCSS菜单进入WordPress（http://corpocrat.com/2015/08/28/how-to-integrate-purecss-navigation-menu-in

Posted 2021-05-13

<?php
// Add custom class to li of wp_navi_menu()
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class($classes, $item){
     
     $classes[] = "pure-menu-item";
     
     return $classes;
}

// Add class to a href
function add_menuclass($ulclass) {
 return preg_replace('/<a /', '<a class="pure-menu-link" ', $ulclass);
 }
add_filter('wp_nav_menu','add_menuclass');

// LI Submenu parent class

add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {
    
    $parents = array();
    foreach ( $items as $item ) {
        if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
            $parents[] = $item->menu_item_parent;
        }
    }
    
    foreach ( $items as $item ) {
        if ( in_array( $item->ID, $parents ) ) {
            $item->classes[] = 'pure-menu-item pure-menu-has-children pure-menu-allow-hover'; 
        }
    }
    
    return $items;    
}

// Add class to ul submenu 

class th_walker_nav_menu extends Walker_Nav_Menu {
  
// add classes to ul sub-menus
function start_lvl( &$output, $depth = 0, $args = array() ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
    $display_depth = ( $depth + 1); // because it counts the first submenu as 0
    $classes = array(
        'sub-menu pure-menu-children',
        ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
        ( $display_depth >=2 ? 'sub-sub-menu' : '' ),
        'menu-depth-' . $display_depth
        );
    $class_names = implode( ' ', $classes );
  
    // build html
    $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
}

}

<nav class="main-nav" id="primary-menu">
  <div class="pure-g">
		<div class="pure-u-1 pure-u-md-1-3">
			<div class="pure-menu">
				<a href="<?php echo home_url(); ?>" class="pure-menu-heading custom-brand">Brand</a>
				<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s><s class="bar"></s></a>
			</div>
		</div>
    <div class="pure-u-1 pure-u-md-2-3">
    <?php wp_nav_menu(array('theme_location' =>'primary', 
                            'menu_class' => 'pure-menu-list',
                            'container_class' => 'pure-menu pure-menu-horizontal custom-can-transform',
                            'walker' => new th_walker_nav_menu()
                            
                            )); ?>
    </div>
  </div>
</nav>

(function (window, document) {
	var menu = document.getElementById('primary-menu'),
		WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';

	function toggleHorizontal() {
		[].forEach.call(
			document.getElementById('primary-menu').querySelectorAll('.custom-can-transform'),
			function(el){
				el.classList.toggle('pure-menu-horizontal');
			}
		);
	}

	function toggleMenu() {
		// set timeout so that the panel has a chance to roll up
		// before the menu switches states
		if (menu.classList.contains('open')) {
			setTimeout(toggleHorizontal, 500);
		}
		else {
			toggleHorizontal();
		}
		menu.classList.toggle('open');
		document.getElementById('toggle').classList.toggle('x');
	}

	function closeMenu() {
		if (menu.classList.contains('open')) {
			toggleMenu();
		}
	}

	document.getElementById('toggle').addEventListener('click', function (e) {
		toggleMenu();
	});

	window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);

.main-nav {
	background-color: #ffd390;
	margin-bottom: 1em;
	-webkit-font-smoothing: antialiased;
	height: 2.1em;
	overflow: hidden;
	-webkit-transition: height 0.5s;
	-moz-transition: height 0.5s;
	-ms-transition: height 0.5s;
	transition: height 0.5s;
}

.main-nav.open {
	height: 14em;
}

.custom-menu-3 {
	text-align: right;
}

.custom-toggle {
	width: 34px;
	height: 34px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	display: none;
}

.custom-toggle .bar {
	background-color: #777;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 100px;
	position: absolute;
	top: 18px;
	right: 7px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}

.custom-toggle .bar:first-child {
	-webkit-transform: translateY(-6px);
	-moz-transform: translateY(-6px);
	-ms-transform: translateY(-6px);
	transform: translateY(-6px);
}

.custom-toggle.x .bar {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

@media (max-width: 47.999em) {

	.custom-menu-3 {
		text-align: left;
	}

	.custom-toggle {
		display: block;
	}

}