beautiful sky

Current Location: Home->Tutorials->Javascript->Browser Functions

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:


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 here to download example javascript menu 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...

Main Links

Design Tools

Javascript Tutorials

CSS Tutorials

Design Tutorials