CSS navigation bar with stylish web2.0 elements
Marino from TechSymptom is great web-designer and started a series of Fireworks tutorials on web 2.0 styled navigation bars. The last one inspired me to create this small CSS tutorial.
Marino has removed the tutorial and his website, we will rebuild the tutorial very soon!
After we finished the tutorial we need to create 2 simple images to style our CSS navigation bar: A background image (the light blue bar) and a transparent button that indicate the active state, all other elements are created with CSS.
Like in most CSS horizontal navigation bars an unordered list is used to hold the menu items:
With the next CSS code it’s possible to style the horizontal navigation bar:
#container {
width:800px;
height:600px;
padding:20px;
}
ul#navbar {
background:url(/tutorials/web20_css_bar/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
ul#navbar li {
float:left;
}
ul#navbar li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
ul#navbar li a:hover {
color:#98CB00;
}
ul#navbar li a#current {
background:url(/tutorials/web20_css_bar/current.gif) no-repeat center bottom;
color:#98CB00;
}
We placed the background image behind “ul” element and added the two borders to the top and bottom. The li element is defined as a floated block element and got some padding to create a bigger button. The last definition is for the current state, which will show up the tri-angle. You need some server-side code (php) to get a dynamic position every time a different page is loaded.
That’s all, download the example files here.
Related posts
- Image manipulations with Imagemagick
- Style the buzz cloud of your Swicki
- Google guidelines against modern web development?
Comments
[...] Here’s the link: CSS navigation bar with stylish web2.0 elements Subscribe to TechSymptom RSS Feed [...]
Nice, great job. It would alsov be nice if you could upload a working example on some server so we could see ti in action 
The live example…
if you place padding:0; into the ul#navbar definition it will correct the extra blank space that is generated when this is viewed in firefox (my version is 2.0.0.3)
Does anyone know what little bit of code is needed for the little arrow to appear in the correct place on each page?
Cheers,
Dan
Sorry, the comment form is closed at this time.
Nice tutorial, Olaf.
It’s really great that you wrote the process of “exporting” the menu into a website. The code is simple and the result is great. Of course, thanks for using my tutorial in yours.