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

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  2. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  4. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  5. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  6. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

最近の記事

  1. 成城石井 フレンチロースト
  2. COMOLI カシミアシルクニットパーカ
  3. 橋
  4. 梅と久保田城
  5. マワマット26

アーカイブ

PAGE TOP