Greedy Navigation

JavaScript

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

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

Greedy Navigation

デモ

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

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

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

Greedy Navigation

関連記事

  1. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  2. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  3. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  4. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

  5. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  6. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP