JavaScript

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

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

Secondary Sliding Navigation

デモ

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

Secondary Sliding Navigation

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

スライド表示

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

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

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

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

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

Secondary Sliding Navigation

薄い青空を深みのある色に補正水色のような薄い青空をPhotoshopで深みのある色に補正するやり方前のページ

シンプルでレスポンシブなモーダルボックス「jQuery Modal」次のページjQuery Modal

関連記事

  1. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  2. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  3. Expanding Bar Navigation Concept
  4. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  5. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  6. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP