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

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

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

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

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

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

2022.4.27 ドロワーメニューのデザインに手を加えました

  • アイコンを大きくして見やすいメニューにしました。
  • マウスホバー時のアイコンアニメーションを設定しました。(アイコンごとに異なるアニメーションを設定してみました)
ドロワーメニューのデザインに手を加えました

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

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

MEMO

今回は addClass / removeClass を使用。他に、slideToggle を使う方法、fadeIn / fadeOut を使う方法などもある。

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

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

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

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