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. columns_img01

    カラムの説明(webflow)

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

  2. webflow004-01

    Div Blockの使用(webflow)

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

  3. filmora-pho006-01

    テキスト「エンディング編」(Filmora)

    テキスト「エンディング編」(Filmora); from yasuo kishioka on V…

  4. filmora-pho014-01

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

    トランジション「ベーシック編6(終) 」(Filmora) from yasuo kishiok…

  5. webflow018-01

    セクションの説明(webflow)

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

  6. photoshop-art005

    Photoshop Art 005

  7. dimension001

    コーヒーカップを作る(Adobe Dimension CC)

    Adobe Dimension CCを使って、コーヒーカップのシーンを作りました。コーヒーカップ…

  8. photoshop-gallery002

    Photoshop Gallery 002

PAGE TOP