HTMLとCSSだけ。ワードプレスのかわいいスマホ用ドロワーメニュー（コピペOK）

スマホ用の、かわいいドロワーメニューの作り方。

• MENUボタンは下に配置。
• ワードプレスの外観＞メニューから作るメニューと連携させる

ということで、かわいいデザインとCSSは下記サイトを参考に作成。

■参考サイト

動きも見た目もすごくタイプ。
少し修正して、スマホのみの表示にしている。

See the Pen ドロワーメニュー by s w (@s-w-the-scripter) on CodePen.

これをワードプレスの外観＞メニューを作成したら反映するようにしたい。

カスタムメニューを作成

カスタムメニューを作るため、function.phpに下記を追加する。

//カスタムmenuを作成
function register_my_menu() {
	register_nav_menu('drawer-nav', ( 'ドロワーメニュー' ));
}
add_action( 'init', 'register_my_menu' );

外観＞メニューに「ドロワーメニュー」が反映された★

カスタムメニューを反映

表示させたいところ（footer.phpなど）に「ドロワーメニュー」を反映させる。

<div id="nav-var">
  <input type="checkbox" id="nav-item">
  <!--ナビアイコン-->
  <label id="nav-icon" for="nav-item">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <!--メニュー後ろの背景用-->
  <label id="nav-bg" for="nav-item"></label>

<!--ここに追加したドロワーメニューを入れる↓-->
<?php 
  wp_nav_menu( array( 
    'theme_location' => 'drawer-nav' 
  ) ); 
?>
</div>

使用したテーマでは、下記のデータのように反映されたので、classを”menu-drawer-container”に合わせてSCSSを作成。

<div class="menu-drawer-container">
	<ul id="menu-drawer" class="menu">
		<li><a href="#">テストmenu1</a></li>
		<li><a href="#">テストmenu2</a></li>
		<li><a href="#">テストmenu3</a></li>		
	</ul>
</div>