ノーコード bubble 解説_ハンバーガーメニュー
スマホでお馴染みのハンバーガーメニュー。レスポンシブなサイトに必須のこのボタンをbubbleで作ります。
目次
2021年4月26日ハンバーガーメニューの作り方、YouTubeにアップしました。動画も合わせて見ると理解が早いと思います◎
PCで見た時はヘッダー上部に「メニュー１」「メニュー２」「メニュー３」を表示させ、
スマホ、タブレットで見た時は「メニュー１〜３」は非表示にしハンバーガーメニューを表示させます。
ハンバーガーメニューの中には「メニュー１〜３」が格納されています。
まずbar Iconの設定から
左のUI BuilderのVisual elementsの中からIconを選んで右の画面上部右端辺り（ヘッダー）でクリックします。
黒い窓が出ます（出ない時はアイコンをダブルクリックしてください）。barと打つと３本線のアイコンが出てきます。
アイコンの色を変更したい場合はStyleを空欄にします。
好みの色に変更します。
アイコンの名前は変更できます。ここではヘッダーにあるメニューアイコンでスマホの時に表示されると言う意味で最後にSPを付け分かり易くしました。
ハンバーガーメニュー：パソコンで非表示、スマホで表示の設定をする
左上、UI BuilderからResponsive（レスポンシブ）に切り替えます。アイコンをクリックするとオレンジの枠が付いてすぐ下に黒い窓が出ます。Add hiding rule（非表示ルールを追加）をクリックします。その名の通りどうなったら非表示にするかルールを決めます。
『〇〇＞900』900より大きい時に非表示
今回はディスプレイの横幅が900より大きくなったらbarアイコンを非表示にすると設定しました。
忘れずにSaveを押して保存します。ついでにFixed margin を右端に設定してbarアイコンが常に画面の右端に表示されるようにしておきます。
出来ているか確認します。
Responsive画面の状態で右上の目盛りの付いたグレー部分を右左に動かしてディスプレイのサイズを変更させ確認出来ます。
上：900pxだとbarアイコンは表示
下：901pxだとbarアイコンは非表示
パソコンで見た時に表示されるメニューの設定
barアイコン（ハンバーガーメニュー）がスマホで表示されるのに対してパソコンで見た時にヘッダーに表示される「メニュー」を作ります。
左のUI BuilderのLinkを選択して右画面上部ヘッダーの位置辺りにクリックします。黒い設定窓の中の上の部分にメニュー名を打ち込みます。
Home 会社概要 お問合せ などですね
Styleの設定が（この場合）最初は”水色の文字でこの大きさ”となっているので自分の好みに変更する場合は「Styleを設定する」をご参照ください。
ここで選んでいる「Oke Link」は上記の「Styleを設定する」方法で作ったので皆さんの選択肢の中には有りません。「Oke Link」はフォントArial、サイズ16px、左寄せ、黒、、こんな風に設定しています。作ったStyleは他のLinkにも適応出来ます。
「メニュー１」をコピペで３つに増やします。３つ全てshiftを押しながら選択して右クリック、Distribute horizontallyで等間隔に並べます。
更に３つを選択した状態で右クリック、Group elements in a Groupでグループにします。
周りの四角が大きな１つ変更し３つがグループになったのが分かります。左のElements treeでも構造が確認できます。
「Group B」 の中に「Linkメニュー１」「Linkメニュー２」「Linkメニュー３」が入っているんだね
パソコンで表示、スマホで非表示の設定をする
barアイコンの時と逆の設定をします。
『〇〇＜＝900』900か900より小さい時に非表示
Responsiveの画面へ行きます。メニューのグループを選択（けっこう選択しずらいです）します。黒い窓の中のAdd hiding rule（非表示ルールを追加）をクリックします。barアイコンの時と同じ900にして「＝＜」：画面の横幅が900と等しいか小さい時に非表示にするとします。Saveで保存、Fixed marginは左端にしておきました。
右上の目盛りの付いたグレー部分を右左に動かしてディスプレイのサイズを変更させ確認します。
上：900pxだと「メニュー１〜３」アイコンは非表示（代わりにbarアイコンが表示）
スマホやタブレットで見た時の設定です
下：901pxだと「メニュー１〜３」アイコンは表示（代わりにbarアイコンが非表示）
パソコンで見た時の設定です
ハンバーガーメニューを押した時に表示されるメニューを設定する
ハンバーガーメニューと通常のメニューの設定が出来たので、スマホでハンバーガーメニューを押した時にぴろっと出てくる部分とメニューを作ります。
まずは下地のぴろっとした所です。
Group Focus を選んで右の画面上でクリックします。左上にピタッと表示されるので見失わないよう注意です◎
Reference element でどこに紐付けるかを選びます。ハンバーガーメニューを作った時の名前（Header Menu〜と書き換えたため今回はこれ）が入っているので選びます。
なので自分で決めた（またはデフォルトのままの）名前を探して選択してください
すると選択したハンバーガーメニューのすぐ下にGroupFocusの四角が移動します。
Offset topやOffset leftで位置を調整します。WidthとHeightで大きさを決めます。
「これを押したら、これを表示させる」動きを加えるためにStart/Edit workflowをクリックします。
Header Menu Icon SPの色が他より濃いグレーで選択された状態になっています。Click here to add an action「アクションを追加するにはここをクリックしてください」をクリックしてアクションを追加します。
Element Actionsの中からShow（表示させる）を選んでみます。
何を表示させるのかを選びます。
何をって？
ハンバーガーメニューを押した時に何を表示させたいのかって事よ◎
あのぴろっとした四角だね
そうです。
GroupFocus Bと言う名前になっていたのでそれを選びます。
Previewで実際の表示を確認します。
画面横サイズを900pxよりも小さくし（今回はそう設定したため）ハンバーガーメニューが表示されたらクリックします。グレーの四角が表示されれば成功です。
続けてこの中に「メニュー１」「メニュー２」「メニュー３」を設置します。
見やすくするためクリーム色にしました。
Linkを選んでGroupFocus B（クリーム色の四角）の中でクリックします。
コピペで３つに増やしshiftを押しながら３つを選択、右クリックで出てくる左の中からDistribute verticallyを選び、ABの隙間を等間隔にします。
先程はハンバーガーメニューを押すとパッと表示されましたが、今度はフワッと表示されるように変更しようと思います。
ワークフローを設定します。
先程の設定が残っているのでdeleteで削除します。
Click〜をクリックしてElement〜の中から今度はAnimateを選びます。
Elementは先程と同じGroupFocus BにしてAnimationでどんな動きをさせるか選びます。スライドダウンを選びました。
そのままでもいいのですがアニメーションにどの位時間をかけるかを設定します。Define a custom durationをクリック、初期設定900はゆっくり感じるので300としました。
右上Previewで実際の動きを確認します。
ハンバーガーメニューをクリックして四角とメニューがフワッと降りてくれば成功です◎
メニュー以外の場所をクリックすればメニューは消えますが、「×」アイコンでスマートにクローズるす方法を「ハンバーガーメニュー２」で書いています。
