更新日: 2022 / 09 / 01

STUDIOでクリックして開くサイドメニューの作り方

カテゴリー: studio

STUDIOでクリックで開くサイドメニュー(ハンバーガーメニュ)を作るにはモーダルを使ってアイコンやテキストとリンクさせるだけでOK。

このページではモーダルの設定など具体的な方法を解説します。

  1. STUDIOでサイドメニューを作る方法

    1. 1.モーダルを作成
    2. 2.モーダルの設定
    3. 3.モーダルにメニューを作成
    4. 4.アイコンを設置してモーダルとリンク
    5. 5.ライブプレビューで動作確認
  2. まとめ

STUDIOでサイドメニューを作る方法

STUDIOでは以下の手順で簡単にサイドメニューを作成できます。

  1. モーダルページを作成
  2. モーダルページの設定
  3. モーダルにメニューを作成
  4. アイコンを設置してモーダルとリンク

1.モーダルを作成

まずはページの作成で「モーダル」を追加します。

STUDIOでサイドメニューを作る方法 1.モーダルページを作成

2.モーダルの設定

モーダルはページとして作成されるのでページタイトルとパスを設定しておきます。

STUDIOでサイドメニューを作る方法 2.モーダルの設定

モーダルのレイアウトも設定しておきます。中央に設置されているモーダルを右上に移動させ、幅300px、高さ100%にします。

サイドメニューを左側に出したい場合はモーダルを左上に移動してください。

STUDIOでサイドメニューを作る方法 2.モーダルの設定2

もう1つ、サイドメニューがどのように出てくるかの設定も行います。

モーダルのページ内の空白部分でクリックするとエディターメニューに「Transition」というメニューが出てくるのでここで「from-right」を選択します。

STUDIOでサイドメニューを作る方法 2.モーダルの設定3

3.モーダルにメニューを作成

次にメニューを設置します。メニューはテキストで配置していきます。

モーダルの内側にスペースを入れて見た目を整えておきます。

STUDIOでサイドメニューを作る方法 3.モーダルにメニューを作成

4.アイコンを設置してモーダルとリンク

最後にヘッダーなどに設置したハンバーガーアイコンとモーダルをリンクさせます。

STUDIOでサイドメニューを作る方法 4.アイコンを設置してモーダルとリンク

アイコンの表示をモバイル限定にすればモバイルでのみモーダルを開くことができます。

5.ライブプレビューで動作確認

ライブプレビューで動作を確認してみます。アイコンをクリックするとサイドメニューが表示されました。

STUDIOでサイドメニューを作る方法 5.ライブプレビューで動作確認

まとめ

STUDIOのサイドメニューはモーダルウィンドウで簡単に作成することができます。

スマホだけでなく、PCでもサイドメニューを表示可能なのでハンバーガーメニューを常に表示するようなデザインにも対応できます。