【Bubble】ハンバーガーメニューをスライドインで表示する方法

【Bubble】ハンバーガーメニューをスライドインで表示する方法

記事をご覧いただきありがとうございます!

今回はハンバーガーメニューのアイコンを押した際にメニューバーがスライドインで表示される方法について解説をしていきます!

動画解説バージョンはこちら!

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

実装手順

以下の手順で実装します。

  1. Floating Groupでヘッダー作成
  2. メニュー表示用のFloating Groupを設置
  3. メニューバーの作成
  4. Work flowの設定

①Floating Groupでヘッダー作成

まずはヘッダーを作成するためにFloating Groupを設置しましょう。

この時Pageのcontainer layoutはcolumn。Floating Groupのcontainer layoutはRowに設定します。

次にFloating Group内にハンバーガーメニュー用のアイコンを設置します。
※設置場所はお好みですが今回は左端に設定します。

②メニュー表示用のFloating Groupを設置

今度はハンバーガーメニューをクリックした際に開かれるメニュー用のFloating Groupを設置していきます。

Floating Groupの設定は下記のように行いましょう!

1.This element visible on page loadのチェックを外す
2.高さ横幅の双方を画面幅いっぱいに設定
3.back groud styleのFlat colorをnoneに設定

1.This element visible on page loadのチェックを外す

これによってページが開かれた際、Floating GroupBが表示されなくなります

2.高さ横幅の双方を画面幅いっぱいに設定

高さ、横幅を画面幅いっぱいにするためには、Floating GroupのLayoutを開き「Make this element fixed-width」と「Make this element fixed-height」のチェックを外しましょう。
※Min-widthとMin-height今回はそのままで大丈夫です。

3.back groud styleのFlat colorをnoneに設定

このFloating GroupBは見えない状態に設定したいため、こちらの設定が必要です。

③メニューバーの作成

1-1Groupの設置

次にハンバーガーメニューをクリックしたい際に表示されるメニューバーを作成していきます。

まずは「Floating Group B(②で設置したもの)」の中に「Group」を設置します。

「container layout」は「column」し左寄せで配置しましょう。

次に縦幅を画面いっぱいにします。
※横幅は好きな長さに調整で大丈夫です。

上記が完了したらback groud styleをFlatcolorでお好みの色にします。

※機能には関係ないですが、この時「Define each border independently」にチェックを知れて、「Border style right」を「Solid」を設定するとメニューバーとその他の画面の境目がはっきりとして見やすくなります。

1-2メニューバーの上部作成

次に上記で設定したGroup Aの中にさらにGroupを入れます。

横幅はGroup Aと同じ幅で縦幅はお好みで調整し、Flatcolorはお好みの色を選択してください。

さらにテキストを入れましょう。

1-3メニューバーの項目作成

Group Aを開き、メニューバーに表示をさせたい項目テキストを入れていきます。

次にGroup Aの「Apply gap spacing between elements」にチェックを入れましょう。

する「Row gap」という欄が表示されるのでこちらにテキスト間のマージンとして設定したい値を入力していきます。

するとGroup Aに設置されている要素のマージンが自動で設定した値分だけ間隔が空くようになります。

これでデザインは以上です!

④ハンバーガーメニューアイコンにWork flowの設定

ハンバーガーメニューのアイコンを選択したらWork flowを開きましょう。

Work flowを開いたら「Element action」→「Animate」の順で選択します。

次に「Element」「Animation」を選択する欄が表示されるので、下記のように入力しましょう。

Element:Floating Group B
Animation:Slide left Big in(左側からスライドインで該当のElement が表示されるという設定です)

⑤Floating Group BにWork flowの設定

最後にFloating Group BにWork flowを設定します。

同じくFloating Group Bを選択してWork flowを開きましょう。

Work flowを開いたら④と同様に「Element action」→「Animate」の順で選択します。

次に表示される「Element」「Animation」を選択する欄は下記のように入力しましょう。

Element action→Animate

Elemen:Floating Group B
Animation:Slide lift Big out(左側へスライドアウトで該当のElement を消していくという設定です)

こちらで対応は以上です!
最後に検証をしていきましょう!

いかがでしたでしょうか?

無事にハンバーガーメニューを押すとメニューバーが表示され、メニューバーを押すとスライドアウトで元の画面に戻る実装が出来たかと思います。

本記事が開発力の向上や開発の依頼を検討している方のお役に立てておりましたら幸いです。

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次