1. Home
  2. Computing & Technology
  3. JavaScript

Drop Down Menu

2. Head Script

clr gif
Join the Discussion

Questions? Comments?

The first step is to create the script and stylesheet that go in the head section of your page. You need to choose the colours to apply to your drop down menu both for the top bar and the drop down lists that appear when you hover the mouse over the top bar.

You will want to choose a theme of colours so many of these entries will have the same values. For example I set up a menu using combinations of brown, orange, and white by setting the colour to 663300, ffffff, 996633, cccccc, 996633, and ffffff in the first column and ffffff, 663300, cc9966, cc9966, ffffff, ffffff, and 996633 in the second. If you want to use this colour combination (or just see how they are entered into the form then select the "Sample Colours" button instead of filling out the form).

Simply enter the six digit hexadecimal codes for the colours you want to use with the menu in the following form and select "Generate". The menuh.js code should be saved into a file of that name and the menu.css code should be saved into a file of that name.

Top Bar Drop Down
Colour Normal: # #
Colour Hover: # #
Colour Active: # #
Link Normal: # #
Link Hover: # #
Link Active: # #
Link Visited: #
menuh.js
menu.css

Now that we have our head script and stylesheets we need to customize the menu and add the script to our page.

Explore JavaScript
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.