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. keynote-animation03-04

    Keynote Animation Sample03(Keyno…

    企業などの解説動画作成に【Keynote】が使用されるケースが増えているということなので、30秒…

  2. Filmora031-01-01

    26種類のフレームオーバーレイ(前半)(Filmora)

    26種類のフレームオーバーレイ(前半)(Filmora) from yasuo kishioka…

  3. webflow002-01

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

    サイト制作を進めながら学習したことを書いていきます。今回はスライドショー設置の紹介になります。…

  4. filmora-pho008-01

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

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

  5. filmora038-01

    旅の素敵な動画を飾る4種類のフィルター(Filmora)

    旅の素敵な動画を飾る4種類のフィルター(Filmora) from KISHIOKA.DESIG…

  6. filmora-pho026-03

    ビジネスコレクション/トランジション11種(Filmora)

    ビジネスコレクション/トランジション11種(Filmora); from yasuo kishi…

  7. filmora-pho028-01

    8つのカメラシェイクエフェクト(Filmora)

    〜Filmoraで動画編集〜8つのカメラシェイクエフェクト(Filmora) from yasu…

  8. filmora-pho012-01

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

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

PAGE TOP