生徒STUDIOでハンバーガーメニューは作れますか？
先生STUDIOでハンバーガーメニューを作る方法を説明します
簡単にWEBサイトが作成できるノーコードツールとして人気があるSTUDIOですが、独自のシステムのためWEBサイトによくあるパーツを作成するのにコツが必要な場合も多いです。
この記事ではSTUDIOでハンバーガーメニューを作成する方法を説明します。
- STUDIOでのハンバーガーメニューの作り方
デスクトップ表示時のメニューを作成
最初に、ヘッダーにするボックスを以下の設定で作成します。
| 名称 | 横幅 | 縦幅 |
|---|---|---|
| Header | 100% | 80px |
メニューアイテムとするテキストを追加して、ヘッダーのボックスの内側に配置します。
メニューアイテムのテキストをコピーします。ここでは3個にしています。
ヘッダーのボックスを選択して、子要素の並び方を設定するボタンをクリックします。
右矢印アイコンを選択して、右並びに設定します。
次に、子要素の配置を設定するボタンを押して右寄せを選択します。
メニューアイテムの3個のテキストを全て選択します。
ボックスを選択して、マージンの右側を40pxにします。
ページに配置したメニューアイテムは、デスクトップ時のみ表示されるように設定します。
レスポンシブを開いてタブレットに切り替えます。
レスポンシブが表示されていない時は、ボックスの外側をクリックすると表示されます。
ハンバーガーメニューのアイコンを追加します。
＞をクリックして画面左側のメニューを表示します。
追加タブを選択して、アイコンをクリックします。
検索欄にmenuと入力して、表示されたハンバーガーメニューをヘッダーボックス内にドラッグします。
アイコンを選択してドラッグするためにマウスカーソルを載せても、マウスカーソルがパディング調整時の緑色にしかならない時があります。
表示スケールを大きくしてからアイコンの中心付近にマウスカーソルを乗せると、ドラッグできる状態になります。
ハンバーガーメニューアイコンのサイズを変更します。
ハンバーガーメニューアイコンの位置を調整します。
ハンバーガーメニューは、タブレット、モバイル時のみ表示されるように設定します。ライブプレビューを表示して、以下の動作になっていることを確認します。
この時点でライブプレビューをして、以下の動きになっていることを確認します。
次にハンバーガーメニューアイコンを押した時に開くメニューを作成します。
ページを管理をクリックします。
ページを選択して追加をクリックします。
モーダルをクリックして選択します。
モーダルの表示を、タブレット、モバイル時のみに設定します。
モーダルのマージンを全て0に設定します。
モーダルのサイズを縦横ともに100%に設定します。
モーダルの角丸を0に設定します。
ハンバーガーメニューの閉じるボタンを追加します。
アイコンをcloseで検索してバツ印のアイコンをドラッグしてモーダルに配置します。
閉じるボタンのサイズも変更します 。
閉じるボタンの配置を絶対位置に変更します。
閉じるボタンをドラッグして、位置を調整して右上角から縦横20px離れた位置に配置します。
閉じるボタンのプロパティ画面を開きます。
リンクをモーダルを閉じるに設定します。
メニューアイテムとするテキストを追加します。
メニューアイテムのテキストをコピーします。ここでは3個にしています。
モーダルのボックスを選択して、上下配置の設定ボタンをクリックして上寄せを選択します。
一番上のテキストだけを選択して、マージンの上側を150pxに設定します。
今度は、下2つのテキストを選択してマージンの上側を20pxに設定します。
表示をモーダルからページに戻します。
ハンバーガーメニューアイコンのプロパティを表示します。
リンクに先程作成したモーダルを選択します。
ライブプレビューで以下の動作になっていることを確認します。
以上でハンバーガーメニューの作成は完了です。