Create a Glossy CSS Menu

Menus are a very important part of contemporary web design, for the simple reason that if there’s no menu, people can’t do much really, like a shopping centre or mall with no floor. The hard part when making a menu is to make it look good and make it accessible… (you don’t want an amazing Flash menu as a main nav because people may not have Flash Player, hence it’ll be inaccessible). Luckily for us though CSS is vastly cross-browser, yes i know even supported in IE believe it or not!

Ok, the backbone of the menu, the CSS:

#navigation {
width: 950px;
height: 50px;
margin: 0;
padding: 0;
background-image: url(images/navigation_bar.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
margin: 0px;
}
#navigation ul li a {
height:28px;
display: block;
float: left;
color: #333333;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/menu_separatorline.jpg);
background-repeat: no-repeat;
background-position: right center;
padding-top: 17px;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
}

#navigation ul li a:hover {
color:#FFF;
background-image: url(images/button_hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}

#navigation ul li#active a {
color:#FFF;
background-image: url(images/button_hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}

That’s the main work done. Remember, for this menu to function properly you need to download the images below!

Now we just have to specify the div of “#navigation” in our HTML

Ok there you have it, a nice, sleek glossy CSS menu. Take a look at the demo for the full source code or download below.

_________________

Live Demo | Download

If you want to learn the complete graphic design, but don’t want to go to a design school then testking 642-524 online course is best option for you. Learn graphic designing fast in full time or part time using testking 640-721 graphic design tutorial and testking 642-873 guide.

Related posts:

1. Create a Simple Javascript Clock When you think “time” for a website, you automatically think...

10 Responses to “Create a Glossy CSS Menu”

1. Vicente Morledge says:

   April 3, 2010 at 2:13 pm

   I knew that research said that 97 % of weblogreaders just read and only 3 % responds, but it is good to see the reasons why those who don’t do this! Thanks and keep up the good work!
2. Alyssa Swymer Movie Maniac says:

   April 6, 2010 at 11:30 pm

   Amazing, that was really fantastic information. Appreciate it for the wonderful article. Shall be back in the future to find out if there will be other updates.
3. medieval costume says:

   April 18, 2010 at 2:09 am

   Wonderful insight
4. yemek tarifi says:

   April 18, 2010 at 7:32 am

   very nice, will look into using this.
5. desenli elbiseler says:

   April 18, 2010 at 8:20 pm

   I will consider to use one of it for our new site. Thanks.
6. Pantalla TFT Lcd Con Backlight says:

   April 19, 2010 at 2:11 am

   Wicked cheers, very use full information. thank you.
   Create A Glossy CSS Menu | Pixel Clouds
7. packaging agency london says:

   May 17, 2010 at 8:06 am

   Good post, thanks
8. rehabilitasyon says:

   July 11, 2010 at 3:55 pm

   Hi, I’m beginning to learn css program. Write your thank you letter will help me a lot of work.
9. Nick says:

   July 14, 2010 at 4:07 am

   Great post – thanks for also offering it as a download. I am getting into more css design and its always cool to demo and test – kudos!
10. Gamers Blog says:

    May 10, 2012 at 2:24 am

    hi can you update the demo link cos it wont work btw thanks fpr the tutorial im trying it now thou im not good in css