Greedy Navigation

JavaScript

レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

Greedy Navigationはレスポンシブ対応でメニューのアイテム数がわかりやすいナビゲーションを実装できます。ハンバーガーアイコンに切り替わったときに、ブラウザサイズに連動して表示されるアイテム数も切り替わっていきます。

Greedy Navigation

デモ

PCで表示させた場合、ブラウザサイズを縮小していくと、それに合わせてハンバーガーアイコンのところにアイテム数が表示されます。この数のぶんだけドロップダウンメニューに表示されます。

縮小すればするほどアイテム数が増えていきます。ドロップダウンメニューにどのくらいの項目が存在するのか瞬時にわかるのでとても便利ですね。

たくさんナビゲーションメニューがあるときなんかに活躍してくれそうです。

Greedy Navigation

関連記事

  1. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  3. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  4. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  5. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  6. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP