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!