
STUDIOでハンバーガーメニューは作れますか?



STUDIOでハンバーガーメニューを作る方法を説明します
簡単にWEBサイトが作成できるノーコードツールとして人気があるSTUDIOですが、独自のシステムのためWEBサイトによくあるパーツを作成するのにコツが必要な場合も多いです。
この記事ではSTUDIOでハンバーガーメニューを作成する方法を説明します。
- STUDIOでのハンバーガーメニューの作り方
デスクトップ表示時のメニューを作成
最初に、ヘッダーにするボックスを以下の設定で作成します。
名称 | 横幅 | 縦幅 |
---|---|---|
Header | 100% | 80px |


メニューアイテムとするテキスト
を追加して、ヘッダーのボックスの内側に配置します。


メニューアイテムのテキスト
をコピーします。ここでは3個にしています。


ヘッダーのボックスを選択して、子要素の並び方を設定するボタンをクリックします。


右矢印アイコンを選択して、右並びに設定します。


次に、子要素の配置を設定するボタンを押して右寄せ
を選択します。


メニューアイテムの3個のテキストを全て選択します。


ボックス
を選択して、マージンの右側を40pxにします。


ページに配置したメニューアイテムは、デスクトップ時のみ表示されるように設定します。


レスポンシブ
を開いてタブレット
に切り替えます。


レスポンシブ
が表示されていない時は、ボックスの外側をクリックすると表示されます。


ハンバーガーメニューのアイコンを追加します。
>をクリックして画面左側のメニューを表示します。

追加
タブを選択して、アイコン
をクリックします。


検索欄にmenu
と入力して、表示されたハンバーガーメニューをヘッダーボックス内にドラッグします。


アイコンを選択してドラッグするためにマウスカーソルを載せても、マウスカーソルがパディング調整時の緑色にしかならない時があります。


表示スケールを大きくしてからアイコンの中心付近にマウスカーソルを乗せると、ドラッグできる状態になります。


ハンバーガーメニューアイコンのサイズを変更します。


ハンバーガーメニューアイコンの位置を調整します。


ハンバーガーメニューは、タブレット
、モバイル
時のみ表示されるように設定します。ライブプレビューを表示して、以下の動作になっていることを確認します。


この時点でライブプレビューをして、以下の動きになっていることを確認します。


次にハンバーガーメニューアイコンを押した時に開くメニューを作成します。
ページを管理
をクリックします。


ページ
を選択して追加
をクリックします。


モーダル
をクリックして選択します。


モーダルの表示を、タブレット
、モバイル
時のみに設定します。


モーダルのマージンを全て0
に設定します。


モーダルのサイズを縦横ともに100%
に設定します。


モーダルの角丸を0
に設定します。


ハンバーガーメニューの閉じるボタンを追加します。
アイコンをclose
で検索してバツ印のアイコンをドラッグしてモーダルに配置します。


閉じるボタンのサイズも変更します 。


閉じるボタンの配置を絶対位置
に変更します。


閉じるボタンをドラッグして、位置を調整して右上角から縦横20px離れた位置に配置します。


閉じるボタンのプロパティ画面を開きます。


リンク
をモーダルを閉じる
に設定します。


メニューアイテムとするテキストを追加します。


メニューアイテムのテキスト
をコピーします。ここでは3個にしています。


モーダルのボックスを選択して、上下配置の設定ボタンをクリックして上寄せを選択します。


一番上のテキストだけを選択して、マージンの上側を150px
に設定します。


今度は、下2つのテキストを選択してマージンの上側を20px
に設定します。


表示をモーダルからページに戻します。


ハンバーガーメニューアイコンのプロパティを表示します。


リンク
に先程作成したモーダルを選択します。


ライブプレビューで以下の動作になっていることを確認します。


以上でハンバーガーメニューの作成は完了です。