10 Image Free Sexy CSS Menu and How to Create One

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

| 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.

[sourcecode language=”html”]
<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>
[/sourcecode]

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

[sourcecode language=”css”]
#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; } [/sourcecode]

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

[sourcecode language=”css”]
#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;
}

[/sourcecode]

And Volia! We have sexy CSS Menu white_menu


Author:

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


  • http://www.localhost.com sarav

    very nice to use but it is not working in IE…..

  • http://www.evolveredes.com Roberto

    Interesting. Will try it. Thanks for sharing.

  • Kawsar Ali

    @Josh: I will check it and get back to you.

  • Josh

    IE8 doesn’t render rounded corners. I get a JS error:
    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.5.21022; MS-RTC LM 8; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
    Timestamp: Tue, 26 May 2009 14:09:47 UTC

    Message: Not implemented

    Line: 135
    Char: 21
    Code: 0
    URI: http://desizntech.info/demo/CSS_menu/jquery.corner.js

  • Josh

    IE8 is not rendering the corners! :(

  • Kawsar Ali

    @Simon:Yah it is a nice tool. Thanks for recommend

  • Kawsar Ali

    @Benjamin DeBell: Thanks for comment

  • http://www.rorah.com Benjamin DeBell

    Thanks for the post, these menus look really good and tutorials really make it easy to understand when it comes to creating my own.

  • Kawsar Ali

    @David Hucklesby: Thanks for the suggestions. I guess if users download they should modify it like you said.

  • David Hucklesby

    Nice. Couple of points though:

    1. 18pt text displays at 30px on my IBM laptop

    2. Some browsers increase line-height when text-size is increased, while others do not.

    Suggestion: use font-size: 1.5em and line-height: 1.25 (no units).

    Hope this helps.

  • Kawsar Ali

    @Damery: Please Check again. Added a mirror download link. Sorry about that

  • http://www.dameryworld.com Damery

    We are downloading an empty zip file…whats up?

  • Kawsar Ali

    @Rahul: Just checked seem to be working. Click on Image Free CSS Menu . should work. Thanks