未来エンジニア養成所Blog

月単価180万以上のプログラミング講師がプログラミングを皆に楽しんでもらうための情報をお届けします。

【Bubble/ノーコード】折りたたみ可能なサブメニューを作る

コメントで「responsiveデザイン対応に伴って、変わっている」とご指摘があるように、記事の内容が古い状態です。

title


グループの作成

動きが分かりやすいようにグループを作成します。


「Groupエレメント」を配置し、スタイルを変更しましょう。

Groupエレメント



「Backgroud style」を「Flat color」に、「Color」を「#091747」にしておきます。

Backgroud style



続いて、グループの中に「Textエレメント」を配置し「メニュー①」とします。

メニュー1



メニュー①をコピー&ペーストして「メニュー②」を作成します。

メニュー2



メニュー①の下に「Groupエレメント」を配置します。

このグループは分かりやすいように「Groupサブ」という名前に変更します。

「Backgroud style」を「Flat color」に、「Color」を「#FFFFFF」にしておきます。

Groupサブ



作成した「Groupサブ」の中に、「Textエレメント」でサブメニューを3つ作ります。

サブメニュー



サブメニューをグループ化します。

3つのTextエレメントを選択し、右クリックで「Group elements in a Group」を選択します。

グループ化



「Groupサブ」のプロパティで「Collapse this element's height when hidden」(非表示の時はこのエレメントは折りたたむ)にチェックを入れます。

つまり、折りたたまれるので、メニュー②が上にスライドしていきます。

折りたたみ



「This element is visible on page load」(このエレメントはページを読み込む時に表示する)のチェックを外します。

ロード時の折りたたみ



これで「Groupサブ」は、ページが読み込まれた時は非表示になり、非表示なので折りたたまれるという設定ができました。



ワークフローの設定

メニュー①のワークフローを設定します。


メニュー①のプロパティから、ワークフローの設定に入ります。

「Groupサブ」のエレメントの表示・非表示を切り替えたいので、「Element Actions」から「Toggle」を選択します。

Toggle



「Groupサブ」の表示・非表示を切り替えたいので「Element」から「Groupサブ」を選択します。

Element



これで設定が完了しましたので、プレビューで動作を確認してみましょう。


サブメニュー表示

サブメニュー表示



サブメニュー非表示

サブメニュー非表示



おまけ機能

メニュー①をクリックした時に、アンダーラインが付くようにします。


「Textエレメント」のプロパティを開いて、「Conditional」で設定します。

「When」でいつの条件か聞かれていますので「Groupサブ」を選択します。

Conditional



「is visible」を選択します。

is visible



これで「Groupサブ」が「表示」された「時」と設定できました。


次に「Underline」を選択します。

Underline



「Underline」にチェックを入れます。

Underline



これで、「Groupサブ」が「表示」された「時」、「アンダーラインを引く」という条件が追加できました。


プレビューで動作を確認しみましょう。


サブメニュー表示

サブメニュー表示



サブメニュー非表示

サブメニュー非表示



参考図書



LINE公式アカウント

仕事が辛くてたまらない人生が、仕事が楽しくてたまらない人生に変わります。
【登録いただいた人全員に、無料キャリア相談プレゼント中!】


LineOfficial

友だち追加