menu

ナビゲーションの設置。(webflow)

サイト制作を進めながら学習したことを書いていきます。

◎Componets/Navbar を画面にドラッグ配置。
・画面左にサイトロゴもしくはテキスト。画面右にナビーゲーションが配置されています。
・タブレットとスマホについてはデフォルトでハンバーガーアイコンによるメニュー表示がされるようになっています。(※選択することも可能です。)

webflow001-02
webflow001-03

◎デザイン上の編集は画面右[Layout][Typography][Background][Border]などで設定します。

webflow001-04

◎リンク先の設定は[Link Settings]で設定します。

webflow001-05

◎マウスオーバー時などの設定は[States]からNone、Hover、Pressed、Focused、Visitedを選択。それぞれに設定を行います。

webflow001-06

▽サンプル
live-preview

☆Responsive navigation bar – Web design tutorial

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

webflow01『Webflow』始めました。(webflow)

webflow002-01スライドショーの設置(webflow)

関連記事

  1. filmora034-01

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora)

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora) from KISHIOKA.DES…

  2. filmora-pho013-01

    トランジション「ベーシック編5」(Filmora)

    トランジション「ベーシック編5」(Filmora); from yasuo kishioka o…

  3. filmora-pho025-04

    ビジネスコレクション/テキスト29種(Filmora)

    ビジネスコレクション/テキスト29種(Filmora); from yasuo kishioka…

  4. photoshop-gallery002

    Photoshop Gallery 002

  5. webflow010-01

    ライトボックスの使用(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はの使用方法を…

  6. filmora037-01

    旅の素敵な動画を飾る10種類のトランジション(Filmora)

    旅の素敵な動画を飾る10種類のトランジション(Filmora) from KISHIOKA.DE…

  7. webflow007-01

    地図の設置(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はの紹介になり…

  8. filmora-pho008-01

    動画を分割表示させてドラマ仕立てに(Filmora)

    動画を分割表示させてドラマ仕立てに(Filmora); from yasuo kishioka …

PAGE TOP