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

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  2. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  3. jQuery Section Navi Plugin
  4. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  5. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  6. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP