カスタマイズ事例 ハンバーガーボタンとドロワーメニュー

このサイトのヘッダーにハンバーガーボタンドロワーメニューを実装しました。

パソコンの場合は左からスライドして出てきます。

ハンバーガーボタンとドロワーメニュー (パソコン)
ハンバーガーボタンとドロワーメニュー (パソコン)

スマホでは上からスライドして下りてきます。

ハンバーガーボタンとドロワーメニュー (スマホ)
ハンバーガーボタンとドロワーメニュー (スマホ)

メニューの位置に Hamburger Menu を追加してこのメニューを表示していますので、メニューの追加・変更を容易に行うことができます。

メニューの位置に Hamburger Menu を追加して、このメニューを表示しています。

HINT

今回は addClass / removeClass を使っていますが、slideToggle を使う方法、fadeIn / fadeOut を使う方法などもあります。

アイキャッチ画像付きドロワーメニュー

リンク先の固定ページに設定されているアイキャッチ画像を表示するメニューも制作可能です。

カスタマイズのご相談・お問い合わせはお気軽にどうぞ

WordPressLightningKatawara を使ったウェブサイトで上記のようなカスタマイズを承ることができます。サイトの運用・更新などでお困りの方はお気軽にご相談ください。