A Responsive CSS Menu using JMenu
CSS 2/3, JMenu
Snippet by Anon
1364 0
Resources
<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 Resources
http://doodlenerd.com/Uploads/Resources/2018/08/VUQfUE8IPJo/css/jmenu.min.css