Menu

Responsive menu

This menu uses a combination of CSS and JS with options for sub-menu items (created from nested unordered lists). At large screen size it is horizontal and below a certain width it collapses to a single menu button. From the menu button the menu items extend downwards as block elements.

The menu has been adapted from the original. The menu is shortened, a few minor errors corrected, files renamed, a few styles changed and code commented. The menu works by linking to a CSS (containing a media query) and JS:
<link href="css/multilevelmenu.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/menuscript.js"></script>

The JS links are to a file on jquery.com and one in the root folder.

Try it

Try this yourself. Set up a root folder to include your web page and the CSS and JS for the menu and create a menu comprising of nested unordered lists. Give the menu the class name of "nav" <ul class="nav">.

Place the code for the menu button before the code for the menu <a class="toggleMenu" href="#">Menu</a>. Add the links for the CSS and JS, placing the CSS link in the head and the JS links just before </body>.

Place the upArrow.png and downArrow.png in your root folder. Make sure the urls for these images are correct in the CSS.

After that, it should work!

Link

The original source for this menu

View the CSS

View the HTML for the menu