ワードプレス、CSSだけで「ハンバーガーメニュー」に装飾

ワードプレスのメニュー機能「wp_nav_menu()」を使って作ったサイトナビをハンバーガーメニューに装飾したのでメモ。

まずはフツーにサイトナビを作る。

外観 → カスタマイズ → メニュー

次に、ネットで「ハンバーガーメニュー CSS」と検索して、ひな形を探す。

資料は沢山あったけど、一発でかみ合ったのは下記の記事だけでした。ありがたくコピペさせて頂きました。

参考：ゆんつてっく「CSSだけで作るハンバーガメニュー」、Wordpress Org「wp_nav_menu()」

「wp_nav_menu()」ナビメニューの中身は、1行目だけメニューで作ったメニュー名と合わせ、残りの要素、class、idは、参考資料に揃えると下記のようになった。

  <div class="drawer">
      <input type="checkbox" id="drawer-check" class="drawer-hidden" >
      <label for="drawer-check" class="drawer-open"><span></span></label>
      
      <?php wp_nav_menu(
      array (
          'menu' => "site-nav",
          'container'=> 'nav',
          'container_class' => 'drawer-content',
          'fallback_cb' => false,
          'items_wrap' => '<ul class="drawer-list">%3$s</ul>',
        )
    ); ?><!-- /.drawer-content -->

  </div><!--.drawer-->

※li要素のクラスを設定するパラメータは見つからなかったのでなし。

CSSは、基本的に資料と同じ流れで、ハンバーガーアイコンと閉じるアイコンは「Google Material Icon」を使用。

参考：Google Fonts「Material Icons」、Nasust Dev Blog「Google Material Icons Code Point 一覧」、「Google Material Icons Code Point を調べました」

CSSで使うためのCode Pointsの一覧の大元ページがなくなっていて、Nasust Dev Blogさんの一覧表は本当に助かりました。

/* チェックボックスを非表示 */
.drawer-hidden {
	display: none;
}  

/* ハンバーガーアイコン外枠 */
.drawer-open {
	display: flex;
	height: 2.5rem;
	width: 2.5rem;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 1.5rem;
	right: 1rem;
	color: #F8F8F8;
	background-color: #ff3366;
	border-radius: 4px;
	z-index: 100;
	cursor: pointer;
}

/* 初期状態のアイコン(menu) */
.drawer-open span:before {
	content: '\e5d2';
	font-family: 'Material Icons';
	font-size: 2rem;
	display: inline-block;
}

/* アイコンがクリックされたら初期アイコンを非表示 */
#drawer-check:checked ~ .drawer-open span::before {
	display:none;
}

/* アイコンがクリックされたら「閉じる」アイコンを表示 */
#drawer-check:checked ~ .drawer-open span::after {
	font-family: 'Material Icons';
	content: '\e5cd';
	font-size: 2rem;
	display: inline-block;	  
	transition: 0.5s;
}

/* メニュー(非表示中)*/
.drawer-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%;
	z-index: 50;
	background: #F8F8F8;
	transition: 0.5s;
	margin: 0;
	padding-top: 5rem;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
	left: 0;
}

/* メニューの装飾 */
ul.drawer-list  {
	list-style-type: none;
}

リストの装飾は、マーカーを外しただけという…

• 

• 

これからタブレットとデスクトップの調整もあるし、とりあえずこれだけ。