横幅に応じてメニュー数が変動するjQueryナビゲーション okayNav

okayNavは横幅に応じてメニュー数が変動するナビゲーションです。

レスポンシブなナビゲーションで、横幅を変えると表示されるメニュー数が変動します。

demo

レスポンシブデザインで、横幅が一定以下になるとメニューが隠れるデザインはよくありますが、隠れたメニューはクリックしないと表示されないため、ユーザーにとっては使いにくいものになってしまいます。隠すメニューは少ないほどいいはずです。

okayNavでは、横幅に応じて自動的に最低限のメニューのみが隠れるようになっています。常に最大数のメニューが初期表示される、ユーザーフレンドリーなUXです。

スポンサーリンク

デモ

デモページを用意しました。

ダウンロード

Download ZIPからダウンロードできます。

cap2

実装方法

HTMLを用意します。

CSSを読み込みます。ダウンロードしたzipの app > css フォルダにあります。

jQueryと、jquery.okayNav.jsを読み込みます。jquery.okayNav.jsはダウンロードしたzipの app > jsフォルダにあります。

id=”nav-main”に対して、scriptを実行します。body閉じタグの直前に挿入します。

以上で、完了です。

オプションも色々と用意されています。

スポンサーリンク
okayNav – 横幅に応じてメニュー数が変動するjQueryナビゲーション

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.03.03
  • Views 1,818