【2021年最新版】bubble新レスポンシブ対応－ハンバーガーメニューの作り方

「調べても調べても、古いバージョン！手順にあるポップアップなんて出ないんだけど！？」

bubbleでWebアプリを作成中の西畑です。
仕上げにスマホ版を作るべく、レスポンシブ対応をしていたのですが…

• 幅が一定より狭くなったら非表示：サイドバーの非表示用
• 幅が一定より狭くなったら表示：ハンバーガーメニューボタン（三）の表示用

の情報が全然ないんです！

と、言う訳で書きました。ご覧ください。

幅がどこまで狭くなったらハンバーガーメニュー表示か決める

1. Responsiveタブをクリック
2. 表示幅を自由に変更できるので、何pxまで表示に問題がないか確認
   ※ちょっとコツがいるのですが、グレーと白の境界の部分（図の赤矢印の位置）に
   矢印が出て掴めるので、それを掴んで左右に動かします。
3. 何pxになったときにヘッダーのアイコンを非表示・ハンバーガーメニューを表示か決定（境界値）

非表示にする部品の表示設定を行う

1. 非表示にする部品のEditを表示
2. Conditionalタブをクリック
3. 表示設定
   1. Whenに「Current page width」「≧」境界値をセット
   2. Select a property to change when trueより、「This element is visible」を選択
   3. 表示するので、「This element is visible」にチェックをつける
4. 非表示設定
   1. Define another conditionボタンをクリック
   2. Whenに「Current page width」「<」境界値をセット
   3. Select a property to change when trueより、「This element is visible」を選択

ハンバーガーメニューボタンを設置

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

作り方は自由で良いですが、私の作り方を書いておきます

1. GroupBoxを置く
   1. Roundness: 8
   2. Border style: Groove
   3. Color: グレー系（今回は#ADADAD）
   4. サイズはfixed-width:40px、fixed-height:40pxで固定
2. 真ん中にアイコンを置く
   1. Google Material IconをPluginに追加
   2. icon: density_mediumを選択
   3. Icon color: グレー系（今回は#595858）
   4. サイズはfixed-width:30px、fixed-height:30pxで固定
3. ヘッダーに設置して出来上がり
   

こうなります

ハンバーガーメニューボタンの表示設定

さっきと逆の設定です。

1. 幅が狭いときに表示する部品のEditを表示
2. Conditionalタブをクリック
3. 非表示設定
   1. Whenに「Current page width」「≧」境界値をセット
   2. Select a property to change when trueより、「This element is visible」を選択
4. 表示設定
   1. Define another conditionボタンをクリック
   2. Whenに「Current page width」「<」境界値をセット
   3. Select a property to change when trueより、「This element is visible」を選択
   4. 表示するので、「This element is visible」にチェックをつける

サイドバーを作成

次に、ハンバーガーメニューを作成していきます。

GroupFocusで作るやり方を紹介します

1. ハンバーガーメニューボタンを表示状態にする（幅を狭くする等）
2. ハンバーガーメニューを作成
   1. GroupFocusを設置して設定
   2. Reference element: ハンバーガーメニューボタン
   3. Offset top: ヘッダーの高さに合わせて自然になるように設定
   4. Offset left: 必要なら自然になるように設定
   5. StyleとBackground styleを調整
3. ハンバーガーメニューの中身を作成
   1. サイドバーの中身をコピー
   2. Conditionalの設定はすべてremove condition
4. GroupFocusハンバーガーメニューのレイアウト設定
   1. Layoutタブへ移動
   2. Container layout: Column
   3. Make this element fixed-content: チェックなし
   4. Min height: 0px
   5. Max height: 空
   6. Fit height to content: チェックなし
5. Responsiveタブで動作確認

Reference elementはどの部品の下に表示するかの設定になります。
ハンバーガーメニューボタンが表示されていないと正しい位置に表示されませんので、
先にハンバーガーメニューボタンは表示しておくことをオススメします。

ハンバーガーメニューボタンの動作を設定

Workflowでボタンクリック時のイベントを設定します

1. ハンバーガーメニューボタンのStart/Edit workflowをクリック
2. Step1にハンバーガーメニューの表示イベントを追加
   1. Element Actionsを選択→showをクリック
   2. Elemnt: GroupFocusハンバーガーメニューを選択

完成です！

早速試してみましょう…「Preview」をポチっと

ハンバーガーメニューボタンが出ています。
ヘッダーもコンテンツもすべて表示できてますし、いい感じですね。

次はハンバーガーメニューボタンをポチっと！

メニューがでました！いい感じです。

もしここで何かイメージしていたのと違うな～と言う事があれば、適宜修正してみてください。

以上です。皆さんも新レスポンシブ対応　Let’s try!!