How to create a menu with the use of javascript:
Current Location: Home->Tutorials->Javascript->Menu
This page includes examples and code on how to:
- Create a Simple menu system using simple javascript, css, and html:
Introduction:
The Positioning of the menu system is written in two main parts in css.
One for the menu closed and one for the menu to be open.
Javascript is then used to switch between the two classes (open or closed).
Four steps to create drop down lists:
Step One:
Click the folder icon to the right to download an example html
page with all the css and javascript you will require for this menu system.
Step Two:
If you intend to use the menu on ALL of your pages it will be best to copy the javascript to a seperate .js file,
however if this is not the case it is better to keep the code where it is (code will be looking for elements that do not exist ie. the menu).
Step Three:
Edit the css to your choice of colors, IMPORTANT: if you decide to align text centre, you should add new
elements to the html code like a 'p' with text-align centre propity. do not edit existing alignments- this is important
for cross browser compatibility. (IE will send the menu to the left if you edit the existing alignments to centre!)
Step Four:
Edit the html code to suit. ie. menu one to products and sub1 menu 1 to cds...