ノーコード bubble 解説_ハンバーガーメニュー２
ハンバーガーメニューを表示させる方法を前回書きましたので、今回は「×」でメニュー窓をクローズする方法を書きます。
bubbleを開きます。barアイコンを押したら表示される設定なのでデフォルトは見えない状態になっていると思います。表示させるにはElements treeをクリックします。
Element tree階層の見方
開いて中身が見れます。前回作った四角のメニュー：GroupFocus Bは目に斜め線のマークになっているのでクリックして目のマークにすると右の画面に表示されます。
更に「+」マークをクリックするとその中の階層も見れます。
GroupFocus Bの中には「Link メニュー１〜３」がちゃんと入っています。今からここと同じ位置に「×」クローズアイコンを設置し、それを押したら窓全体が消えるようにワークフローを調整します。
クローズIconを設置する
左のUI BuilderからIconを選んで（この場合は）黄色い四角の中でクリックします。同時に黒い窓が出るのでIconの所にcloseと打ち込むと候補が出てきます。
色を変えたい場合はStyleの所を空欄にすればIcon colorが表示され自由に色を選べます。薄いグレーにしました。
workflow で動きを付ける
closeアイコンに動きをつけるためStart/Edit workflow を押します。
When〜”closeアイコンが押された時どうするか”を決めます。Click〜を押します。
ちなみにグレーの四角の数は制作中のサイトによって違うので気にしないでください◎
四角いメニュー窓を隠したいのでElement Action からHideを選びます。
Hide の窓が出来るのでElementを選びます。選ぶ物は”四角いメニュー窓”なのでGroupFocus Bです。
Previewで実際にクリックして動作を確認します。
ハンバーガーメニューを押して、、
×マークを押してメニューが消えたら成功です。
