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