多階層ドロップダウン対応レスポンシブメニュープラグイン「WP Responsive Menu」セットアップ
目的
レスポンシブ対応されていないサイトをレスポンシブ化する時に、プラグイン「WP responsive Menu」（投稿者: MagniGenie）が便利です。
このプラグインはメニューが多階層でドロップダウンする動作にも対応しています。
ここではそのセットアップについて述べます。
スマホメニュー動作仕様
- メニューはWordPressの標準機能「外観」→「メニュー」で定義したものが適用される（ここでは仮に「main-menu」とする）。
- ハンバーガーだけを右上に常時固定表示する（新たなスマホ用ヘッダーは作成しない）。
- メニュー項目はハンバーガータップで右からスライドインする。
- 子メニューは通常時は非表示とし、アイコン（▼）タップでドロップダウンする。
設定
設定はプラグインの設定と、デザインカスタマイズのための独自cssの設定があります。
■ プラグインの設定（サイドメニュー「WPP Menu」）
[ ]内が設定値
- General
- Enable Responsive Menu ： [チェック] ←このプラグインの動作発動設定
- Select Menu ： [main-menu]
- Elements To Hide On Mobile ： [（レシポンシブで非表示とするメニューを指定）]
- Appearance
- Menu Style ： [Custom] ←これでハンバーガーだけ右上固定にできる
- Menu Icon Position From Top ： [1] ←上をCustomにすると1以上にしないと位置不定
- Menu Icon Direction ： [Right]
- Menu Open Direction ： [Right]
- Display Menu From Width ： [750] ←レシポンシブが有効になるデバイス幅（px）
■ 独自cssの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/* ハンバーガーのデザイン変更（背景なし・通常時は「三」が黒・オープン時は「X」が白） */ /* 背景透過 */ .wprmenu_bar #custom_menu_icon.hamburger{ background-color: transparent; } /* 通常時の「三」は黒 */ .wprmenu_bar .hamburger-inner, .wprmenu_bar .hamburger-inner::before, .wprmenu_bar .hamburger-inner::after { background: #333; } .wprmenu_bar .hamburger:hover .hamburger-inner, .wprmenu_bar .hamburger:hover .hamburger-inner::before, .wprmenu_bar .hamburger:hover .hamburger-inner::after { background: #333; } /* オープン時の「X」は白 */ .wprmenu_bar.active .hamburger-inner, .wprmenu_bar.active .hamburger-inner::before, .wprmenu_bar.active .hamburger-inner::after { background: #fff; } .wprmenu_bar.active .hamburger:hover .hamburger-inner, .wprmenu_bar.active .hamburger:hover .hamburger-inner::before, .wprmenu_bar.active .hamburger:hover .hamburger-inner::after { background: #fff; } /* ハンバーガー（この時は「X」になっている）の表示領域確保のためメニュー領域を下げる */ .custom #wprmenu_menu_ul{ padding-top: 50px; } /* ドロップダウンメニューアイコンを「▼」に変更 */ .icon_default.wprmenu_icon_par::before { content: "▼"; position: absolute; font-size: 20px; /* ▼回転アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; } /* 「▼」を回転させて「▲」に */ .icon_default.wprmenu_par_opened::before { transform:rotate(60deg); } /* 「▼」の位置調整 */ div#mg-wprm-wrap ul#wprmenu_menu_ul > li > span.wprmenu_icon::before { right: 13px; } |
まとめ
（※ 当ページは社内技術資料としての位置付けですので読みにくいこともあるかもしれませんが、一般の方の課題解決に役立てれば幸いです。）
関連記事一覧
