EZserver - Making the Internet EZ, One Site at a Time

  • Increase font size
  • Default font size
  • Decrease font size

CSS Navbar Generator

E-mail Print PDF

CSS Navbar Generator


CSS-based navigational bar generator. Extremely customizable. Click on Read More to use this tool.

Navbar Generator

Navbar Generator Notes:
- The link and cell mouseovers will only work under Internet Explorer 4.0 and above, or under Netscape 6. The links will still be active under Netscape 4.x, but will not react to mouseovers.

- If the you enter a link that's wider than the width of the navbar, and that link is one word, the navbar's width will expand. If the link is more than one word, the link will split into 2 lines. Either way, it's best to set the navbar's width to match the width of the widest link.

- You may enter a link without assigning a link URL, the link will simply be inactive. You may also enter a "blank" cell, without a link or URL, in case you want to add these variables manually later.
Navbar Style Variables
The cell properties represent the background of the navigational bar's links. If you don't want the background color to change when mouse-overed, leave the "Mouseover Color" property empty. If you don't want the cells to have borders, set "Border Width"  to "0".
Mouseover Color:
Cell Padding:
Border Width:
Border Color:
The text properties effect the text links on the navigational bar. If you don't want the text link color to change when mouse-overed, leave the "Mouseover Color" property empty.

Tip: Bold links usually stand out better on a low-contrast background.
Mouseover Color:
The overall width of the navigational bar.
Click here for a palette of Hex values -
Link Names and URLs
Move the selected link up or down the navbar:

Delete the selected link:

Link Name:
Link URL:
Last Updated on Tuesday, 13 April 2010 14:35