JavaScript

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

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

Secondary Sliding Navigation

デモ

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

Secondary Sliding Navigation

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

スライド表示

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

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

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

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

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

Secondary Sliding Navigation

関連記事

  1. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  2. no-image
  3. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  4. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  5. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  6. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP