Rollover menus are all the rage. I can't stand a menu that doesn't rollover * cough * To me it is just feels icky when I mouse over a menu item and nothing happens. CSS makes pretty menus quite easy. Today we are going to learn how to make horizontal and vertical menus that are pretty and creative Let's get started.

First I will show you the basics with a horizontal menu, so lets make a list:



Easy enough. Now let's start off with the basics for a horizontal menu:





Well thats nice but it sure is ugly! Let's make it pretty now...time to go to photoshop...don't freak out it is the easiest step: Make a new file that is 25px in height and 3px in width:



Pick any two colors you like, put one on the forground and one on the background. I am going to go with dream-in-code orange. Now get your gradient tool, make sure the gradient is set on foreground to background:



Now make a line from the top to bottom and save it for the web in your images folder:



Now make a line from the bottom to the top and do the same:



Now here add this to your CSS, using your own image names:




Still not good enough for ya? OK let's spruce it up a bit with a border:





Wow!!! Pretty!!...as pretty as orange can be...ok let's make a vertical one, use the same unordered list and here is the basic CSS for the vertical menu:



But we need to make it pretty now! Go to photoshop and do the same as before only make the width the same as your ul li a width + padding on each side = 170 and make the height 3px, then take your gradient from right to left and then left to right. Then add this to your CSS:



The possibilities are endless, you can play with margins, padding, color, borders-- just remember DON'T mess with the ul margins and don't cop out w/ the a's you MUST have them in this order link, visited, hover, active. Otherwise they won't work properly. Let me know how it goes!

You can see these menus at: http://www.webtestinglab.com/tutorials/

Excellent explanation, and an example page too!

+1 for good use of the word Freaking.

Very nicely done! Good work.

What's wrong with orange?!

awww thank you guys...

I knew I couldn't use the alternative to freakin

I am a fan of all colors, even the ugliest color can look good if it is complemented right, and the orange on this site is done well, I don't think any other color would do, it is unique enough to constitute a brand, I get a nice warm fuzzy feeling from it when I visit the site and when I see the color I will always associate it w/ </dream.in.code> haha but orange is just one of those colors that only fit well in certain situations, it is hard to make it work but works perfectly for this site

Good one, you encourage me to finish my tutorial.
Regards.

Essentially you could even make it better by using the "CSS Sprite" technique to put both those images on a single image file and just make the CSS move the positioning of the image down. I believe (or have read) that it makes the hover more responsive which means faster, and also instead of 2 menu images, its just one and would have a tiny bit less of a file size (I guess this is because it only needs 1 color palette instead of 2), so its even that much faster. Not to mention its so much cleaner when you have less images in your image folder, just one aspect of being extremely organized.

hrm that is a valid point, i'll have to google that one

Interesting, never thought of doing that but it makes complete sense.

found something...very interesting...

http://www.alistapart.com/articles/sprites

Ugh I'm no good at this. Ok so here is my code. It is not looking like yours at all.




and here is the CSS



What's going on?

Is the "other sites" dropping down? This is what it does for me when I pasted your code in my testing lab...I tried positioning the background to the top for the a lvha and that helped a little.....let me keep tweaking it...it is the fact that it is on two line, I even tried to put a br in it, and that didn't work either...let me keep tweaking and see...

turns out the background position did work but it still looks like poo. So if you delete the width, or make it long enough so that word won't wrap you problem will be solved...also deleting the height will make the border quit being funny, but it will always come out a little bit, but there is no white space
here is the link:

http://www.webtestinglab.com/tutorials/test.html

and new code

Thats actually the article I was referring to, you can do the technique with a ton of things, for example if you have a h2 tag where you use custom art for it instead of straight text you can line up all those h2 images, lets say you have 6 different h2 images, you can just have one art file for all those 6 images and just move the positioning with classes on those h2's, also anything with a hover the sprite technique is recommended, its just better... It may be a pain at first but stick with it and eventually it just clicks and it becomes really easy and requires less code for things like hovers.

Hope that makes sense.

Hey thanks a lot! I almost had it figured out it looks like. This is a great tutorial.

I thought I would just post a small problem I came across while working through this tutorial. Just before your first Photoshop screenshot your text says to make the graphic 25px high and 3px wide. However in your screenshot it shows the height at 50px.

I used the size as 25px high which was a big mistake because the graphic does not fill the menu box.
It took me a long time to discover why it wouldn't work.

Just make sure your graphics you create are 50px high not 25!

Thanks for a great tutorial though.

I used your tutorial for my web sites (vertical menus) and it works great!