10 Image Free Sexy CSS Menu and How to Create One

Posted & filed under CSS, Tutorial

It has been while since we did any CSS menu post here. Who said you can’t make sexy, cool looking menu with CSS ? Today we bring you 10 Free sexy CSS menu and tutorial on how to create one. As usual they are free for personal use. Most the of menus are created using  CSS and CSS3 propety-webkit-border-radius and -moz-border-radius. Obviously Internet Explorer does not support those properties. Too bad. However, for the sake of it one of the menus is using jQuery rounded corner plugin. So, it is rounded crossbrowser.

Menus are test in Latest version of Firefox, Safari and IE7.

Please report any bugs or improvement.

P.S. : Do not complain if the menus do not work in IE6. Not intended for it.

View Demo

Download Sexy CSS Menu | Mirror
menu_preview_1

menu_preview_2

How to create a Sexy CSS Menu?

First you have your basic HTML Mark Up. You can wrap it around with a menu wrapper if you like.

<ul id="nav_rounded_white">
<li><a href="#">Home</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">About</a></li>
<li><a href="#"> Contact </a></li>
</ul>

We get a simple menu list.
list1
Now we need to add the magical CSS. This creates a horizontal menu.

#nav_rounded_white {
background:#fff;
padding:10px 0px 0px 20px;
height:40px;
width:auto;
list-style: none;
text-transform: lowercase;
font-family: arial, "lucida console", sans-serif;   }

#nav_rounded_white ul {
margin: 0;
padding: 0;   }

#nav_rounded_white li {
float: left;
margin: 0;
padding:0px 10px 0px 0px;   }

Now we get a horizontal menu. horizontal_menu Now we need to add some flavor to it. Change the color as you like.

#nav_rounded_white a {
display:block;
line-height: 30px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 18pt;
color:#fff;
letter-spacing:-1px;
text-decoration: none;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#ccccbb;

}

#nav_rounded_white a:hover {
text-decoration:none;
background:#004455;
}

And Volia! We have sexy CSS Menu white_menu

More about Kawsar Ali

About the author

Kawsar Ali is a web designer who also likes blogging. He is the curator of Desizn Tech. In his spare time he walks around with a Nikon D5100 hunting for good textures.

Tags: , ,


Related posts:

Comments

Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.