Create Simple Clean Menu using CSS and HTML.

Create a simple , nice looking menu with hover effect without using any flash but only with HTML and CSS.

like this:

click here to open it in new window

You will need to save these two images , these gradient images are must to give a hover effect.

This is the first image  Menu image

This is second image Rev Menu image just reverse of it.

To save them just right click->save Image.

now we have all the things set up to start coding. This is our html code :

You can see that I have used 5 div tags 1 for the menu bar and 4 for the buttons, I have named those 4 classes as button and given separate ids for the first and last button, because it is needed to style them separately. We will see its importance later.

Now create CSS file and link it or just enter the style code in same html file, I prefer to write in external sheet. So the code I entered in the style sheet is like this :

You can see I have defined menu bar div tag’s height, width, background and margins. Margins help to align the menu bar at centre of the window, if you change it the menu will appear at the extreme left end. I also defined the background image of the menubar tag, don’t use the reversed image , use the right one
Now add this code.

I have defined .button class, this styles the buttons, all buttons gets styled at a time as I set all button div classes as “button”. I have made them float left to make them appear in a single row, without them they would make two rows. Width is set to 24% (you may think there are just 4 buttons then why not 25%, well, another one per cent will be used by the borders). Chosen font family, you choose the one you want. Colour was also set to make it more visible and nice. Margins are set to auto to perfectly align them. Text-align is used to center the text in the div tags. Padding-top is used drop down the line height as text were appearing bit higher. Only right border is taken in this class, border on both side will make double lines and will ruin the looks.

Now add this code.

As I didn’t enter the left border in .button class, there was a separator missing. So we will add border to the first button now, this will also add margin to the left button. Without margin menu won’t look good.

Now we have created the simple menu but we didn’t yet create a hover effect for the buttons.
enter this code into style sheet :

I have defined hover effect for the class “.button” when the mouse is over the button the background image of the divs changes , so use the reversed menu background image. I have also changed the font colour to make it look more better.
Here ends the creation of menu bar, but I would like to suggest you more. Well, as you know when we create a hyper link it only effects the text but not the whole div tag so it better to use like me , check below.

You can see that I have wrapped whole div button tags so this will make the total div tags as a link rather than just text only.
And also add this code to the style sheet. Cause you wont like to ruin the looks with underlines as hyperlinks gets unlined automatically.

Thanks for reading, keep in touch. New tutorials will be published soon, till that good bye.