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

iPhoneのバッテリー節約に!低電力モードの設定方法と解除前のページ

ブルーライトをカットしてくれるiPhoneアプリ「視力保護ブラウザ for iPhone」次のページ視力保護ブラウザ for iPhone

関連記事

  1. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

  2. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  3. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  4. jqueryIntroLoader
  5. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  6. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP