コーディングなしのWebサイト作成『STUDIO』入門

4-4. 右側から現れるハンバーガーメニュー

  • Webデザイン

ハンバーガーメニュー をクリックしたら右側から表示されるグローバルナビゲーションを作成します。

公開日:2021/03/25最終更新日:2021/03/26

1.ハンバーガーメニュー のアイコンを配置

右側から表示されるグローバルナビゲーションは次の手順で作成していきます。

  • ハンバーガーメニュー のアイコンを配置
  • 右側から表示される部分を作成
  • 閉じるボタンを配置
  • リンクを繋ぐ

まずはヘッダー部分にハンバーガーメニューのアイコンを設置します。

左のタブにある[アイコン]をクリックします。
表示されたアイコンをハンバーガーメニュー のアイコンに変更します。

変更したいアイコンをダブルクリックします。
すると、左のタブが開きアイコンがたくさん表示されるので「menu」と検索するとハンバーガーメニューのアイコンが表示されます。

表示されたハンバーガーメニューのアイコンをクリックすると変更されます。

アイコンをハンバーガーメニューに変更ができたら、配置したい場所、今回はヘッダーの部分に移動します。

2.右側から表示される部分を作成

ハンバーガーメニューをクリックしたら表示されるグローバルナビゲーションの部分をモーダルのページで作成します。

右側にあるページに[+]がついたアイコンをクリックし、モーダルを選択します。

モーダルのボックス部分を編集してグローバルナビゲーションを作成していきます。
表示されるエリアを調整し、ナビゲーションのテキストを入力します。

3.閉じるボタンを配置

開いたナビゲーションを閉じるためのアイコンを設置します。
ヘッダーにハンバーガーメニュー のアイコンを追加した時のように左のタブにある[アイコン]をクリックします。

表示されたアイコンをダブルクリックし、「close」と検索して閉じるアイコンに変更します。

4.リンクを繋ぐ

ヘッダーに設置したハンバーガーメニューのアイコンをクリックするとモーダルが表示されるようにリンクをつないでいきます。

アイコンの右がわにある矢印をクリックしリンク先を設定します。
[Link]から[Page]を選択し作成したモーダルを選びます。

 

モーダルの開き方を指定

モーダルの開き方を指定します。
モーダルを選択すると、[Transition]を選択できる部分が表示されます。

グローバルナビゲーションの部分のみ選択していると[Transition]は表示されないので、モーダル全体を選択します。

 

[Transition]から[FromRight]を選択します。

モーダルで開くグローバルナビゲーションを閉じることができるように、閉じるアイコンのリンク先を指定しておきます。


 

ライブプレビューで確認

ライブプレビューで確認してみます。
ハンバーガーメニューをクリックで右からグローバルナビゲーションを表示することができました。

理解度チェック





コーディングなしのWebサイト作成『STUDIO』入門

1. STUDIOの概要とサインアップ

2. STUDIOの基本操作

3. STUDIOで作ったサイトを公開する

4. STUDIO応用編