Raindrops　取扱説明書

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

以下の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;

}