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

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

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

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

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

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

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


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

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

幅を調整して何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」を選択

Conditionalを設定(ここが前と変わりました)

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

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

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

ハンバーガーメニューボタン
  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. ヘッダーに設置して出来上がり
GroupBoxの設定
アイコンの設定
ヘッダーの隣に設置

こうなります

ヘッダーの隣にハンバーガーメニューボタンが付いた

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

さっきと逆の設定です。

  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」にチェックをつける

conditional設定

サイドバーを作成

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

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

GroupFocusを作成
GroupFocusハンバーガーメニューのレイアウト設定
サイドバーを追加して動作確認

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

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

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

完成です!

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

モバイルの広さでプレビュー

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

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

ハンバーガーメニューを表示

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

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

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

ノーコードを扱える エンジニアに特化した人材紹介

NoCodeCampではエンジニアのスキルを可視化して 最適なマッチングを実現します。 BubbleやFlutterFlowなど、アプリ開発ができるエンジニアを紹介します。

開発カテゴリの最新記事