ハンバーガーメニューの作り方〜STUDIO〜
STUDIO
2024年5月22日
前回の記事で、WordPressの投稿をSTUDIOに移行する手順をご紹介しました。
今回は、STUDIOでハンバーガーメニューを作成する方法を解説します。
早速行ってみましょー！
Contents
ハンバーガーメニューの作り方
今回も当サイトを例に進めていきます。
基準の大きさで、上部にあるnavメニューを
タブレットの大きさから、ハンバーガーメニューに切り替えます。
基準の大きさの状態で、navメニューを選択し、左上にある目のマークの「表示」をクリック
基準、タブレット、モバイルすべてにチェックが入っているので、タブレットとモバイルのチェックを外します。
これで、基準の大きさの時のみ表示されるようになります。
実際に横幅を動かして確認してみてください。
2.ハンバーガーメニューのページを作る
左側のメニューのページタブから、ページの追加を行います。
ページの追加ボタンを押すと、ページ、モーダル、リダイレクト、…と選択できるので、「モーダル」をクリック。
モーダルページを開き、メニューを作っていきます。
このメニューブロックは、基準の大きさでは非表示、タブレット、モバイルでの大きさの時に表示されるように設定しておきます。
ちなみに右上の「✖」ボタンは、アイコン内のFont Awesomeで、英語のｘ（エックス）と検索すると、出てきます
3.閉じるボタンを実装
ハンバーガーメニューのページで作成した、閉じるボタンを選択した状態で右メニューを開き、「モーダルを閉じる」を選択し、リンクを設定します。
4.ハンバーガーメニューを開くボタンの設定
Homeのページに戻り、ハンバーガーを開くときのボタンを作成します。
こちらのアイコンは、Material Iconsで「menu」と検索すると出てきます。
このボタンも、メニューブロックと同様に、基準の大きさでは非表示、タブレット、モバイルでの大きさの時に表示されるように設定しておきます。
先ほど作ったモーダルページへのリンクを設定します。
これで作成完了です。
ハンバーガーメニューがサクッと作れました。
ライブプレビューで確認してみてください。
以上です。