ページの上部にサブメニューを追加する

写真のように、ページの上部にサブメニューを表示する方法について

以下のPHPコードを、functions.phpに追加します。

以下のコードの場合

メニュー階層は制限なしです

キーボードアクセシビリティ対応

add_action( 'after_setup_theme', 'raindrops_add_secondary_navigation' );

function raindrops_add_secondary_navigation(){
	register_nav_menus( array( 'secondary'=> esc_html__( 'Secondary Navigation', 'Raindrops' ), ) );
	add_filter( 'raindrops_embed_meta_css','raindrops_secondary_navigation_style' );
	add_action( 'raindrops_prepend_doc', 'raindrops_secondary_navigation' );
	add_filter( 'script_loader_tag', 'raindrops_script_loader_tag', 10, 3 );
}

function raindrops_secondary_navigation(){
	$defaults= array(
		'theme_location' => 'secondary',
		'container' => 'div',
		'container_class'=> 'secondary-nav-menu',
		'menu_class' => 'menu',
		'menu_id' => 'secondary-memu',
		'echo'=> true,
		'fallback_cb' => '',
		'before'=> '',
		'after'=> '',
		'items_wrap' => '

',
		'depth'=> 0,
	);
	wp_nav_menu( $defaults );
	echo '
';

}
function raindrops_secondary_navigation_style( $css ) {

$custom_css= '

.secondary-nav-menu{

box-sizing:border-box; min-height:1%; display:block; position:relative; height:3.2em;

}
.secondary-nav-menu ul,
.secondary-nav-menu li{

margin:0; padding:0;

}

.secondary-nav-menu> .menu li{

float:right; z-index:1000; list-style:none; position:relative;

}

.secondary-nav-menu .children,
.secondary-nav-menu .sub-menu{

display:none;

}

.secondary-nav-menu ul ul li ul li,
.secondary-nav-menu li:hover> .children> li,
.secondary-nav-menu li:hover> .sub-menu> li{

width:100%; text-align:left; box-sizing:border-box;

}

.secondary-nav-menu li.menu-has-children:hover ul,
.secondary-nav-menu li:hover> li,
.secondary-nav-menu li:hover> .children,
.secondary-nav-menu li:hover> .sub-menu{

display:block; position:absolute; z-index:1000; width:100%; margin-left:0; left:0;

}

.secondary-nav-menu ul ul li ul li{

display:block; position:absolute; z-index:1100; width:100%; margin-left:0; right:100%; top:-3.2em;

}
.secondary-nav-menu .item-wrapper a,
.secondary-nav-menu .item-wrapper{

display:block; width:100%; height:100%; padding:.5em; box-sizing:border-box;

}

.secondary-nav-menu .item-wrapper{

border:1px solid rgba(0,0,0,.1);

}
/* keyboard accessibility .focus support raindrops-helper.js */

.secondary-nav-menu ul ul li ul li.focus,
.secondary-nav-menu li.focus> .children> li,
.secondary-nav-menu li.focus> .sub-menu> li{

width:100%; text-align:left; box-sizing:border-box;

}

.secondary-nav-menu li.menu-has-children.focus ul,
.secondary-nav-menu li.focus> li,
.secondary-nav-menu li.focus> .children,
.secondary-nav-menu li.focus> .sub-menu{

display:block; position:absolute; z-index:1000; width:100%; margin-left:0; left:0;

}
/* menu list color */
.item-wrapper{

background:#333; color:#fff;

}';

return $css.$custom_css;

}

function raindrops_script_loader_tag( $tag, $handle, $src ) {

$script= "jQuery( '.secondary-nav-menu' ).find( 'a' ).on( 'focus.raindrops blur.raindrops', function ( ) { jQuery( this ).parents( ).toggleClass( 'focus' );

} );
jQuery( '.secondary-nav-menu' ).on('mousemove','a', function(){

jQuery( this ).toggleClass('focus').parents( ).children().removeClass('focus');

});";

if ( $handle== 'raindrops_helper_script' ) { return $tag . '' . "\n"; } return $tag;

}


コメントは受け付けていません。