プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

Bubble:ハンバーガーメニュー

 

Toggleで簡単に

1.デザインを作成

 ①Iconを設置

 ②GroupFocus(メニュー)を設置

 ③GroupFocusのReference elementに①のIconを指定

  ※メニュー表示時もIconが見えている必要があるので、

   GroupFocusだと、設置が楽。

   

 

2.ワークフローを設定

   

これで、完了。

Iconクリックでメニューが表示・非表示を繰り返す。

 

 

Animateでディテールにこだわる

1.デザインを作成

 ①ハンバーガーIconを設置

   

 ②FloatingGroup等(メニュー)を設置

 ③閉じるIconを設置

   

 

2.ワークフローを設定

ハンバーガーIconクリック時

 ①ハンバーガーIconクリックをきっかけに設定

 ②Animateを選択

 ③Elementにて、1.②で設置したメニューを選択

 ④Animationにて、表示させる動きを選択

   

 

閉じるIconクリック時

 ①閉じるIconクリックをきっかけに設定

 ②Animateを選択

 ③Elementにて、1.②で設置したメニューを選択

 ④Animationにて、非表示させる動きを選択