コメントで「responsiveデザイン対応に伴って、変わっている」とご指摘があるように、記事の内容が古い状態です。
.png)
グループの作成
動きが分かりやすいようにグループを作成します。
「Groupエレメント」を配置し、スタイルを変更しましょう。
「Backgroud style」を「Flat color」に、「Color」を「#091747」にしておきます。
続いて、グループの中に「Textエレメント」を配置し「メニュー①」とします。
メニュー①をコピー＆ペーストして「メニュー②」を作成します。
メニュー①の下に「Groupエレメント」を配置します。
このグループは分かりやすいように「Groupサブ」という名前に変更します。
「Backgroud style」を「Flat color」に、「Color」を「#FFFFFF」にしておきます。
作成した「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」を選択します。
「Groupサブ」の表示・非表示を切り替えたいので「Element」から「Groupサブ」を選択します。
これで設定が完了しましたので、プレビューで動作を確認してみましょう。
サブメニュー表示
サブメニュー非表示
おまけ機能
メニュー①をクリックした時に、アンダーラインが付くようにします。
「Textエレメント」のプロパティを開いて、「Conditional」で設定します。
「When」でいつの条件か聞かれていますので「Groupサブ」を選択します。
「is visible」を選択します。
これで「Groupサブ」が「表示」された「時」と設定できました。
次に「Underline」を選択します。
「Underline」にチェックを入れます。
これで、「Groupサブ」が「表示」された「時」、「アンダーラインを引く」という条件が追加できました。
プレビューで動作を確認しみましょう。
サブメニュー表示
サブメニュー非表示
参考図書
LINE公式アカウント
仕事が辛くてたまらない人生が、仕事が楽しくてたまらない人生に変わります。
【登録いただいた人全員に、無料キャリア相談プレゼント中！】
