webflow014-01

STUDY

ドロップダウンメニューの設定(webflow)

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回はドロップダウンメニューの設定方法を紹介します。

◎Components/[Dropdown]をナビゲーション箇所に配置する。

webflow014-02
webflow014-03

◎下の階層のメニュー設定を行うには、配置したドロップダウンメニューを選択した状態で
Navbar Settings/Open Menuをクリックする。

webflow014-04
webflow014-05

◎テキストの入力やボタンのデザイン編集を行い、
Link Settingsで各ボタンのリンク先設定を行う。

webflow014-06
webflow014-07

▽サンプル
live-preview

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

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

webflow013-01フィルタの設定(webflow)前のページ

フレックスボックスの設定(webflow)次のページwebflow015-01

関連記事

  1. container_img01

    STUDY

    コンテナの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  2. text-and-particle
  3. ae-thumbnail200126

    After Effects

    27 Elegant 4K Title Animationsを使って試作

    MotionElementsに掲載されている「27 Elegant…

  4. filmora-pho017-02

    Filmora

    ファッションコレクション/フィルター10種(Filmora)

    ファッションコレクション/フィルター10種(Filmora); f…

  5. webflow016-01

    STUDY

    フレックスボックスの設定2(webflow)

    ◎「Reverse Layout」の選択でブレークポイントでレイアウト…

  6. filmora-pho007-01

    Filmora

    海外映画・ドラマ風のカラーグレーディング(Filmora)

    海外映画・ドラマ風のカラーグレーディング; from yasuo …

  1. tooltips02

    Adobe Muse CCを使ったホームページ制作

    ツールチップをアニメーションで演出(Adobe Muse CC)
  2. Blog-サムネイル20201218

    Premiere Pro

    映像に波のゆがみ効果を簡単に(Premiere Pro/Motion Array…
  3. filmora-pho025-04

    Filmora

    ビジネスコレクション/テキスト29種(Filmora)
  4. animated-intro-001

    Adobe Muse CCを使ったホームページ制作

    イメージ上のテキストにアニメーションを(Adobe Muse CC)
  5. filmora-pho028-01

    Filmora

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