横幅に応じてメニュー数が変動する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閉じタグの直前に挿入します。

以上で、完了です。

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

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,989