A responsive navigation menu written in CSS, no JavaScript used. The styles are pretty barebones, only the required ones are implemented, which keeps things light. You can use your own styles on top of what is here to make it look how you want it to.
In larger browser windows, the menu items are shown horizontally. In smaller browser windows, menu items are hidden until the 'Menu' is clicked. To see this in action, try resizing the width of your browser and observe the topmost menu bar.
While there are other responsive navigation menus available, most of them require JavaScript to function. This one doesn't.
- Download the css file from the dist folder.
- Link to the css file in your page.
<link rel="stylesheet" href="css-responsive-menu.css" />- Use the following code template for the menu.
<div class="css-responsive-menu">
<label for="hidden-checkbox1" class="expand-control">Menu</label>
<input type="checkbox" id="hidden-checkbox1" class="expand-control">
<ul class="navigation-list">
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>