縦のNav barをカスタムで作る

Web
ノーコード
ビルダー

このチュートリアルでは、完全にカスタムでNavbarを作る方法について教えます。今回のNavbarは、メニューが縦になって、オシャレなデザインに使いやすい作り方になっています。

今回一緒に作っていくNavbarのHTML構成はこうなります。

Nav Containerというクラスを持つコンテイナーのMax広さを1250pxに設定しました。

その子供であるNav WrapperのDivは、ポジションをRelativeに設定しました。そうすると、ポジションAbsoluteを持つNavMenuがその要素にリレーションします。Nav Wrapperのレイアウト設定は以下のように設定します:

そうすると、ロゴとMenu Buttonを持つBrand Wrapperと検索欄を中に入れるDiv Blockが横の真ん中で揃えて、それぞれ極端的に左側と右側の位置を取っています。Nav Wrapperの上と下のパディングを両方10pxに設定して、少しスペースを開けました。

Brand Wrapperの設定は、レイアウトだけで、以上の設定とほとんど一緒ですが、Justifyだけを左側にしました。

Menu WrapperのとLink Blockの間でスペースを開けるために、Menu Wrapperの右側のマージンを20pxに設定しました。そして、この要素の中にサイズ30pxの画像(Menu Button)を入れています。Menu Wrapperのレイアウトは、Hiddenにして、携帯の表示だけをデフォルトのBlockにしています。そして、マウスの設定はPointerにしましょう。

Link Blockのスタイリング設定は特にありませんが、中のロゴとなる文字を大きくしました。

同じくNav Wrapperの子供であるDiv Blockの中に検索欄を入れて、検索ボタンを非表示にしました。また検索インプットのスタイリングを以下にしました:

バックグラウンド:透明

ボーダー:すべて2pxで真っ黒

Placeholderのフォント:18pxで真っ黒

サイズ:高さ50px

そして、スペーシングをこう設定しました:

検索のクラスをNav Bar Searchにして、そして、それをコピーして、Nav Menuにペーストしました。ただ、ペーストした後、検索のクラスを複製して、Nav Menu Searchにしました。

次は、Nav Menuのブロックです。こちらは、トップマージンを80pxにして、OverflowをHiddenで、ポジションをAbsoluteのTop Leftにしました。

そうすると、Nav Menuはその親のサイズに影響を与えずに、縦でNavLinkを並べます。

NavLinkの設定は、以下のようなスタイリングにしました。

NavMenuに入っている検索欄を携帯表示の時にだけにレイアウトをBLockにしますが、その他は基本的にHiddenになっています。そして、Nav Bar Searchは逆です。

今度は、アニメーションを使って、NavMenuを開けたり、閉じたりする動きを作っておきます。

Menu Wrapperを選択して、Interactionsの設定から新しいElement Triggerを設定しましょう。それを、Mouse Clickにします。そして、On 1st Clickのところで新しいタイミングアニメーションを作って、そこに二つのSizeアクションを作ります:

どちらでも、右側クリックして、ターゲットをNav Menuにします。そうして一つ目のアクションは、Initial Stateをオンにして、高さを0pxにします。

22つ目のアクションは、高さをAutoにします。

そうすると、デフォルトでNavMenuの高さが0pxになって、見えなくなりますが、Menuを押したら、その高さがAutoになって、メニューの中身が出てきます。

Doneをおして、On 2nd Clickのところでも新しいアニメーションを作っていきましょう。

今回も、Sizeアクションを作って、右クリックでそのターゲットをNav Menuにします。

そして、アクションの高さを又0pxにしましょう。

そうすると、マウスを一回クリックして、デフォルトで0pxで設定されているMenuの高さがAutoになって、メニューの中身が表示されます。そして、2回目クリックすると、メニューの高さがまた0pxになって、消えます。

これで、設定が完了されます。