jQuery

【jQuery】モバイルマルチレベルナビゲーションを作成するHC MobileNav

July 30, 2018

HC MobileNavはメニューをモバイルナビゲーションに変換するためのjQueryプラグイン。サブメニュー要素を入れ子にすることも可能。

Usage

Call the plugin

<script src="/path/to/jquery.js"></script>
<script src="/path/to/hc-mobile-nav.js"></script>
<script>
  jQuery(document).ready(function($) {
    $('#main-nav').hcMobileNav({
      maxWidth: 980
    });
  });
</script>

Example HTML menu structure

<nav id="main-nav">
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li>
      <a href="/services">Services</a>
      <ul>
        <li>
          <a href="/hosting">Hosting</a>
          <ul>
            <li><a href="/private">Private Server</a></li>
            <li><a href="/managed">Managed Hosting</a></li>
          </ul>
        </li>
        <li><a href="/domains">Domains</a></li>
        <li><a href="/websites">Websites</a></li>
      </ul>
    </li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>