ノーコード 「STUDIO」 → ハンバーガーメニューの作り方

STUDIO

Nocodeの「STUDIO」の使い方に関しての、操作マニュアルです。

少しずつ、整理しながらマニュアルとして作っていきますので、良かったらご参考下さい。

  • ハンバーガーメニューとは?
  • 【オススメ動画】ハンバーガーメニュー動画3選

ハンバーガーメニューとは?

Webサイトでメニューを展開する際に使用する「=」並び線のアイコンのことであり、クリックに応じてメニューを表示・非表示するような役割があります。

押したら、下記のようなメニュー画面が出る感じです↓

【オススメ動画】ハンバーガーメニュー動画3選

オススメ動画は下記の3選です。

  • ハンバーガーメニューの作り方
  • ハンバーガーメニューの作り方 | STUDIO Tips
  • 【NoCodeでWebサイト制作】STUDIOでテンプレートを模写してみよう【開閉式メニューをつくろう編】

ハンバーガーメニューの作り方


こちらは、英語版ですが日本語字幕で説明しています。
動画時間も3分くらいなので、最低限の説明でシンプル。サクっとわかりやすく説明しています。

ハンバーガーメニューの作り方 | STUDIO Tips


モバイル、タブレット、PC版で作るとどうなるか?など、1から作成しながら説明しています。
テキストやサイズ、細かな部分も解説しながらメニューを作っていきます。丁寧に作りたい方は、こちらの動画がオススメです。

【NoCodeでWebサイト制作】STUDIOでテンプレートを模写してみよう【開閉式メニューをつくろう編】


こちらは、上記のレストランサイトを作ったご本人(はるかなさん)が解説している動画です。

ご本人が作ったサイト・動画であり、とてもわかりやすく解説しています。私もこちらの動画を参考にして、模写しました。

こちらも丁寧に細かな部分を説明しながら解説しています。また、ハンバーガーメニューだけでなく、レストランサイト全般を参考に聞きたい方は、こちらの動画をオススメします。

メニューの開閉時の切り替えについて

機器によって表示を分けたい時は、モバイル画面のみ、「MENU」を消す設定が必要になります。

  • PC画面   :『MENU =』
  • モバイル画面:『=』

下記の記事にまとめていますので、ご参考下さい。