A responsive navigation menu written in CSS, no JavaScript used.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
dist
vendor/skeleton
.gitattributes
.gitignore
GruntFile.js
README.md
bower.json
contribute.html
getting-started.html
index.html
package.json

README.md

What is it?

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.

Why?

While there are other responsive navigation menus available, most of them require JavaScript to function. This one doesn't.

Getting Started

  1. Download the css file from the dist folder.
  2. Link to the css file in your page.
<link rel="stylesheet" href="css-responsive-menu.css" />
  1. 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>