A Responsive CSS Menu using JMenu

gravatar
CSS 2/3, JMenu
Snippet by Anon
1113 0
HTML
<h1>JMenu Demos</h1>
  <section>
    <h3>Simple Menu</h3>
    <nav class="jmenu">
      <ul>
        <li><a href="javascript:void(0)">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a></li>
        <li><a href="javascript:void(0)">About</a></li>
        <li><a href="javascript:void(0)">Contact</a></li>
      </ul>
    </nav>
  </section>
  <section class="tall">
    <h3>Menu with Dropdown</h3>
    <nav class="jmenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li class="jm-dropdown">
          <a href="javascript:void(0)">Categories<span class="jm-icon-dropdown"></span></a>
          <ul>
            <li><a href="javascript:void(0)">Apples</a></li>
            <li><a href="javascript:void(0)">Bananas and Pears</a></li>
            <li><a href="javascript:void(0)">Oranges</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0)">About</a></li>
        <li><a href="javascript:void(0)">Contact</a></li>
      </ul>
    </nav>
    <p>Notice how the dropdown floats over this text on desktop?</p>
  </section>
  <section class="tall">
    <h3>Menu with Menu Button</h3>
    <nav class="jmenu">
      <label for="menu-btn" class="jm-menu-btn jm-icon-menu"></label>
      <input type="checkbox" id="menu-btn" class="jm-menu-btn">
      <ul class="jm-collapse">
        <li><a href="javascript:void(0)">Home</a></li>
        <li class="jm-dropdown">
          <a href="javascript:void(0)">Categories</a>
          <ul>
            <li><a href="javascript:void(0)">Apples</a></li>
            <li><a href="javascript:void(0)">Bananas and Pears</a></li>
            <li><a href="javascript:void(0)">Oranges</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0)">About</a></li>
        <li><a href="javascript:void(0)">Contact</a></li>
      </ul>
    </nav>
  </section>
CSS
{ } JS

            
Preview