Tuesday, March 16, 2010

css horizontal navigation menu...

basically to create a menu you need to create a list first..
Ex:
ul id="navigation">
lia href="#">Homeli>
lia href="#">Aboutli
lia href="#"Stuffli
lia href="#"Other Stuffli
lia href="#">Contact Usli
/ul

This looks like a simple list:
So first lets get rid of the bullet. So the css will be:
ul#navigation {
list-style: none;
}

And to get the list item line up horizontally we add:
ul#navigation li {
display: inline;
white-space:nowrap;
}

The ‘display: inline;’ line creates the horizontal line.
‘white-space:no-wrap’ prevents our list from wrapping
and turning into a 2-line list, which could possible
happen when the page is viewed at lower resolutions or
the font is increased beyond a certain size in the
browser view.
Now the list looks like:
Home About Stuff Other Stuff Contact Us

At this point, it’s kind of ugly, but how to dress it up
will be a different post.

Cheers,
Snehal