JavaScript

サブメニューがメインの上にオーバースライドしてくる「Secondary Sliding Navigation」

Secondary Sliding Navigationはサブメニューがメインナビゲーションの上にオーバースライドで表示してくるナビゲーションを実装することができます。一つのスペース内で複数のメニューを切り替えることができるのでとても便利ですね。

Secondary Sliding Navigation

デモ

メインメニューにあるCategoriesをクリックすると、

Secondary Sliding Navigation

その上からカテゴリーメニューがスライド表示してきます。

スライド表示

モバイル時にはサイドからメニューがスライドするようになっており、PCからスマフォまでいろんなデバイスに対応できる使いやすいナビゲーションメニューを実装できます。

限られたスペース内でメインメニューとサブメニューをうまく表示できるようにしたいという場合にはピッタリですね。スライドさせたり色を変えることで違うメニューに切り替わったことが瞬時に把握しやすいのでユーザーにとっても分かりやすいのではないでしょうか。

また、同じ場所でメニューを切り替えれるようにすることでレイアウトもスッキリするので、Webサイトをシンプルなデザインに設計したいという時にも役立ちますね

実際のデモはフラットデザインになっていることから、フラットデザインとの相性もすごく良いナビゲーションだなぁと思いました。

デザイン・機能性ともにすごくいい感じなので、これからモバイルにも対応したナビゲーションを実装したい時には選択肢の一つとして覚えておきたいところです。

Secondary Sliding Navigation

関連記事

  1. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  2. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  3. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

  4. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  5. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

  6. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

最近の記事

  1. CHA-SAJI
  2. SLE-19P
  3. Soundcore Ace A0
  4. Fire 7 タブレット

アーカイブ

PAGE TOP