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

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

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

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

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

デモ

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

ダウンロード

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

実装方法

HTMLを用意します。

<header id="header">
  <a class="site-logo" href="#">
   Logo
  </a>
  <nav role="navigation" id="nav-main" class="okayNav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Testimonials</a></li>
    </ul>
 </nav>
</header>

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

<link href="css/header.css"/ rel="stylesheet">
<link href="css/okayNav.css"/ rel="stylesheet">
<link href="css/basic-styles.css"/ rel="stylesheet">

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.okayNav.js"></script>

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

<script>
  var navigation = $('#nav-main').okayNav();
</script>
</body>

以上で、完了です。

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

var navigation = $('#nav-main').okayNav({
  parent : '', // will call nav's parent() by default
  toggle_icon_class : 'okayNav__menu-toggle',
  toggle_icon_content: '<span /><span /><span />',
  align_right: true, // If false, the menu and the kebab icon will be on the left
  swipe_enabled: true, // If true, you'll be able to swipe left/right to open the navigation
  threshold: 50, // Nav will auto open/close if swiped >= this many percent
  beforeOpen : function() {}, // Will trigger before the nav gets opened
  afterOpen : function() {}, // Will trigger after the nav gets opened
  beforeClose : function() {}, // Will trigger before the nav gets closed
  afterClose : function() {}, // Will trigger after the nav gets closed
  itemHidden: function() {}, // Will trigger after an item moves to the hidden navigation
  itemDisplayed: function() {} // Will trigger after an item moves to the visible navigation
});