Vertical Fixed Navigation #2

JavaScript

サイド表示で見やすくて操作もしやすい縦型ナビゲーション「Vertical Fixed Navigation #2」

Vertical Fixed Navigation #2はサイドに表示される縦型ナビゲーションです。固定されているのでスクロールしても好きな場所から瞬時にアクセスできます。シンプルで見やすいうえに操作性にも優れています。

Vertical Fixed Navigation #2

デモ

右側に表示されたドットにホバーするとアイコンが表示されます。ドットだけではどんなメニューかわかりませんでしたが、アイコンつきのメニューなら内容も把握しやすいですね。

ホバー時のエフェクトは、右からスライド表示されるとともに、ドットが拡大しながらアイコンへと変化していきます。違和感なくスムーズな動作がとても快適です。

アイコンに切り替わることでクリックもしやすくなりますね。また、必要なときだけアイコンつきナビゲーションが表示され、それ以外はドットが表示されているだけというシンプルなデザインなので、コンテンツにも集中しやすいと思います。

縦型ナビゲーションということで、縦に長いページとの相性は抜群です。ランディングページをつくる際にも役立つのではないでしょうか。

というわけで、固定された縦型ナビゲーション「Vertical Fixed Navigation #2」のご紹介でした。

Vertical Fixed Navigation #2

関連記事

  1. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

  2. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  3. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  4. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  5. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP