WP スマホ メニューボタン
header.php
<header>
<div class="sitenav">
<button type="button" id="navbtn">
<i class="fa fa-bars"></i><span>MENE</span>
<?php wp_nav_menu(array(
'theme_location' => 'sitenav',
'container' => 'nav',
'container_class' => 'mainmenu',
'container_id' => 'mainmenu'
));
?>
</div>
</header>
------
style.css
@media(max-width:767px) {
/* ナビメニュー */
.mainmenu ul {margin: 0;padding: 0; list-style: none;}
.mainmenu li a{display: block; padding: 10px 5px; text-decoration: none; color: #fff; font-size: 13.8px;font-weight: 600;}
.mainmenu li a:hover {background-color: #eeeeee;}
/* トグル */
header .inner{position: relative;}
#navbtn{position: absolute;top:15px; right: 5px;padding: 6px 12px; border: solid 1px #aaaaaa; border-radius: 5px;
background-color: #fff; cursor: pointer;}
#navbtn i {color:#888888;font-size: 18px;}
#navbtn span {display: inline-block;text-indent: -999px;}
}
-----
functions.php
// カスタムメニュー
register_nav_menu('sitenav', 'サイトナビロケーション');
//トグルボタン
function navbtn_scripts() {
wp_enqueue_script('navbtn-script', get_template_directory_uri().'/navbtn.js', array('jQuery'));
}
add_action('wp_enqueue_script', 'navbtn_scripts');
wp_enqueue_script 引数1 => ハンドル名(名前規則は、任意なのでどんな名前でもOK)
引数2 =>スクリプトのURL
引数3 => 依存関係にあるスクリプト
--------
navbtn.js (テーマフォルダ index.php と同じ階層) jsフォルダに入れる場合は
functions.php の get_template_directory_uri() . 'js/navbtn.js'
// menu btn
jQuery(function(){
jQuery('#navbtn').click(function(){
jQuery('.mainmenu').slideToggle();
});
});