Web制作ナビWeb制作ナビWeb制作に役立つ情報やサービスを紹介。Menu」の使い方を紹介したいと思います。↓このように、モバイルサイトにアコーディオン形式のメニューを実装できます。↓子メニューを展開した状態です。↓さらに孫メニューを展開した状態です。↓ちなみに、導入前の状態です。利用しているテーマでは、小メニュー、孫メニューが階層表示されてそのまま表示されていました。通常は問題ないのですが、メニュー数が多いと縦に長く、見にくくなってしまいます。それでは、プラグインの使い方を紹介していきます。Menu」という設定メニューが表示されます。ここでは、私が行った設定について紹介します。Setup」の設定をします。アコーディオン形式のモバイルメニューを表示するブレイクポイントを設定します。使用しているテーマに合わせます。アコーディオン形式のメニューを適用するメニューを選択します。アコーディオン形式のメニューはテーマが出力するデフォルトのメニューとは別のコードで出力されます。そのため、プラグインが出力するアコーディオン形式のメニューと、テーマが出力するデフォルトのメニュー、2つのメニューが重複して表示されてしまいます。そこで、テーマが出力するデフォルトのメニューを非表示にする必要があります。テーマが出力するデフォルトのメニューのCSSセレクタを指定することで、指定した部分を非表示にすることができます。続いて「menu」の設定です。Clikcs」を「On」にします。これで、メニューの外をタップしたときに、メニューが閉じるようになります。続いて、「Button」の設定を行います。Animationの「Positioning」から「Absolute」を選びます。ハンバーガーメニューの位置が絶対位置になります。Locationで、ハンバーガーメニューの表示位置を調整します。Sizingでハンバーガーメニューの大きさを調整します。Coloursからハンバーガーメニューの配色を調整します。プラグインの設定はこれで完了です。各項目の設定値はテーマによって調整します。最後にテーマのCSSに下記のコードを追加しました。0);}Androidでアコーディオンメニューの動作を確認したときに、アコーディオンメニューをタップすると、画面全体が青色にピカッとハイライト表示されて見にくかったのこのスタイルを追加して、ハイライト表示を停止しました。これで、WordPressにアコーディオンメニューを実装できました。2019.03.24Top。