Build responsive navigation with DaisyNav jQuery Plugin

Getting Started

This plugin contains pretty cool built-in css for navigation, you can use it on your website, or use your own styles - it's no matters.

Including DaisyNav to your webpage

Copy daisynav folder somewhere to your project-folder, for example to js/ and include jquery.daisynav.min.js to your webpage.
Please note: DaisyNav requires jQuery, you should include jQuery the first and then include DaisyNav

<script src="js/jquery.js"></script>
<script src="js/daisynav/jquery.daisynav.min.js"></script>

We recommend you to merge daisynav styles with your main style.css file, or you can implement it as is:

<link rel="stylesheet" href="js/daisynav/daisynav.css">

Recommended Menu Structure

You should use <ul> tag with class "menu-list" for your menu.
For each <li> that contains sub-menu you should add "has-submenu" class.
For each sub-menu <ul> tag you should use "sub-menu" class.

Also you can add toggle button with class "menu-toggle-button", that hides/shows menu, we recommend use it for mobile devices.
You can specify different menu for each toggle button by adding data-option to button: data-menu-id="MENU-ID" or data-menu-id="MENU-ID-1 MENU-ID-2".

Please see example below.

<!-- Toggle button for menu, you can place it anywhere -->
<div class="menu-toggle-button" data-menu-id="demo-menu">≡</div>

<!-- Menu Structure -->
<ul class="menu-list" id="demo-menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="has-submenu">
    <a href="#">Item 3</a>
    <ul class="sub-menu">
      <li><a href="#">Item 3.1</a></li>
      <li class="has-submenu">
        <a href="#">Item 3.2</a>
        <ul class="sub-menu">
          <li><a href="#">Item 3.2.1</a></li>
          <li><a href="#">Item 3.2.2</a></li>
          <li><a href="#">Item 3.2.3</a></li>
          <li><a href="#">Item 3.2.4</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.3</a></li>
      <li><a href="#">Item 3.4</a></li>
      <li class="has-submenu">
        <a href="#">Item 3.5</a>
        <ul class="sub-menu">
          <li><a href="#">Item 3.5.1</a></li>
          <li><a href="#">Item 3.5.2</a></li>
          <li><a href="#">Item 3.5.3</a></li>
          <li><a href="#">Item 3.5.4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li class="has-submenu">
    <a href="#">Item 5</a>
    <ul class="sub-menu">
      <li><a href="#">Item 5.1</a></li>
      <li><a href="#">Item 5.2</a></li>
      <li><a href="#">Item 5.3</a></li>
      <li class="has-submenu">
        <a href="#">Item 5.4</a>
        <ul class="sub-menu">
          <li><a href="#">Item 5.4.1</a></li>
          <li><a href="#">Item 5.4.2</a></li>
          <li><a href="#">Item 5.4.3</a></li>
          <li><a href="#">Item 5.4.4</a></li>
        </ul>
      </li>
      <li><a href="#">Item 5.5</a></li>                    
    </ul>
  </li>
</ul>