agoSTUDIOで、クリックに応じてメニューを表示・非表示するような「ハンバーガーメニュー」を作成するステップを解説します。今回は通常のWebサイトによくあるような、PCサイズの場合はナビゲーションが表示され、モバイル、タブレットサイズのみにハンバーメニューを表示するようなレイアウトを作成していきます。ハンバーガーメニューを作成するには、主に3つのステップが必要です。PCサイズでのメニューを非表示にするまず、モバイル&タブレットサイズでハンバーガーメニューを作成するために、PCサイズで作成したナビゲーションメニューを非表示しましょう。要素の表示・非表示設定は、要素を選択した状態で左上の目のアイコンにカーソルを合わせることで設定可能です。今回は、PCサイズ(デフォルトサイズ)のみにナビゲーションメニューを表示したいので、非表示にしたいナビゲーションを選択した状態でタブレットとモバイルのチェックを外します。デフォルトのみで要素が表示され、タブレット&モバイルサイズではナビゲーションメニューは非表示設定になりました。次に、スクリーンサイズをタブレット、またはモバイルサイズに変更しましょう。すると先ほど1で設定したナビゲーションメニューは、非表示になるはずです。その部分に、ハンバーガーメニューを開閉させるトリガーとなるアイコンやテキストを配置しましょう。(今回はメニューアイコンを例として配置します。)こちらのメニューアイコンは、モバイル&タブレットサイズでのみ表示したいので、今度はこのアイコンを選択し、デフォルトでの表示のチェックを外しておきましょう。メニューを作成し、トリガーと紐付ける最後にトリガーをクリックしたら表示させたいメニューを作成していきましょう。メニューを追加するには、何も要素を選択していない状態で上部に表示させるページメニューから、「ページを追加」をクリックし、「モーダル」を選択します。すると、新しくメニュー用のページが作成されるのでこのメニューをデザインしていきましょう。表示の仕方はトランジションで自由に設定が可能です。デザインが完了したら、今度は先ほど作成したトリガーのメニューアイコンがあるページに戻り、メニューアイコンにトリガーを設定していきます。メニューアイコンを選択し、右上のリンクパネルを開きます。リンク先に、先ほど作成したメニューページを選択します。これで、メニューアイコンをクリックすることで開閉するメニューが完成です。question?STUDIO。