[Home] [Hosting] [Web Design] [Webmasters Area] [Custom Graphics]



D R O P   D O W N   M E N U
and how to make it special
Tired of boring plain, black and white drop downs?

Directions for customizing the drop down are below the directions for installing the drop down.

Copy and paste this code into the head
of your page, just above the </head> tag.
Copy and paste this code into the body
of your page where you want the drop down to be.

  Create YOUR Links  

When you look at the body code for the drop down, you will notice the above line repeated many times with little difference. Those are the links and the text a visitor views.

The URL is pretty easy to spot, change these to fit links you wish to create on your own site.

The text the visitor sees needs to be changed to reflect each of the links. See it there, right after the end of the URL? (Don't loose the > and < on either side of the text.)

  More or Less Options?  

If your drop down needs less options, just delete the ones not needed being careful not to delete this code too.
If your drop down needs more options, just dopy and paste from the ones provided to create more. They must be pasted in above this code.

  Customizing the Drop Down  

The code below is what you will need to change to customize the look of your drop down. We'll look at it one attribute at a time.
  • select name="nav"
    • It doesn't matter what your call it, just make sure the "" are in place.
  • size=1
    • This refers to the size of the font. Tiny fonts need to be a bit bigger so remember, if your visitor doesn't have your chosen font installed, they will see their default font a bit bigger.
  • style="font-family:
    • Font Name
    • color: (use HEX values for best results)
      this is the font color
    • background-color
      this is the background color of the drop down box
    • font-size
      start with a size 12pt, then make it bigger or smaller as needed
    • border-style: outset
      I have tried a few other options on this, but trust me, this is the only way to go.
    • border-color:
      there isn't a big notice on the border color, but it does offer just a hint so it is well worth the overall effect.


[Home] [Hosting] [Web Design] [Webmasters Area] [Custom Graphics]
[Mission Statement] [Comments]