bubble.ioでの上手なresponsive designのやり方(Header編)

bubble.ioでは、responsiveデザインにも対応しています。どんな画面幅の媒体でもうまく表示させるためのコツを、今回はHeaderに焦点を当ててご紹介いたいと思います。
（※　まず完成形(ページ最後)を見てもらってから、全体をみた方が良いかも。。）

１．Plugin "Slidable Menu"をInstallする

PluginタブからSlidable Menuを検索して、Installしてみてください。
↓こちらです。

２．Headerを配置し、Header編集画面に移動

Reusable elementsから、Headerを選択し、ページの一番上に張り付けてください。

その後、左上のSearch a page or a resuable...とある空欄から、Headerを選んで、Header編集画面に移動します。

Header画面のElement treeを見ると、実は既にログインボタンとログアウトボタンが用意されているのがわかります。

どちらもvisibleにするとこんな感じです。ただし、Conditionalを見ると、Sign up / Loginボタンは、ログアウトしているときだけvisibleになるような設定になっていることがわかります。

３．画面幅が広い場合のメニューバーを作成する。

例えば、ページ幅の閾値を600として、
　ページ幅600を超えるときは横並びのメニューバーを、
　ページ幅600以下であればSliable menuを
表示させるような場合を考えてみましょう。

まず、画面幅が広い場合に表示させる横並びのメニューを作ります。

Groupを作成し（Group メニューバーと名付けました）、その中に、Group Logged OutもGroup Logged Inも入れてしまいましょう。（この際、２つ同時に移動させると、片方のグループがもう片方の子になってしまうので、一つずつ移動させてください。）

Group メニューバーの中に、メニュー１、メニュー２、メニュー３といったTextを入れます。そして、Group メニューバー全体について、Conditionalタブで、Current page width < 600のときにvisibleのチェックが外れるようにします。

４．画面幅が狭い場合のメニューバーを作成する。

次に、画面幅が狭い場合に表示させる、メニューバーを作成します。

Element treeの目のボタンを押し、Group メニューバーを非表示にした上で、Slidebar Menu を画面右上に配置します。
このバーは通常は表示しないので、その際、visibleのチェックを外します。また、右側に展開されるようにするため、Opening sideはRightとします。

さらに、Conditionalで、
・ページ幅 600以下でvisibleとする
・ログイン時はログアウトも選択肢に入れる
・ログアウト時はログインも選択肢に入れる
ことを指定します。

５．ヘッダーの各部分が押された場合の反応をWorkflowで記載

あとは、Workflowで、ヘッダーの各部分が押された場合に、どういったことを起こしたいのかを書いていけばOKです。

ただし、気を付けなければならないことは、Slidebar Menuの選択肢は、Group メニューバーの中の各Textと紐づけることができない点です。なので、Textを書き換えるたびに、Slidebar Menuの選択肢も手動で変更せねばなりません。

完成形はこんな感じ

実際に、Preview画面で見てみると、画面幅が狭い場合はこうなり、

バーを押すとメニューが現れます。

他方、画面幅が広いとこうなります。

さて、うまくできたでしょうか。今日はこのへんで！