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