Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

10 Image Free Sexy CSS Menu and How to Create One

Posted May 21, 2009 & 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: css rounded, Menus, navigation


Related posts:
  • A Free Colorful CSS Menu
  • Free CSS Music Menu
  • Discover the “Cool” of CSS: 25 Advanced CSS Techniques
  • How to Create 3 Types of Patterns Using Pixelmator
  • How to Create a Simple, Dark Yet Stylish Portfolio Design

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.

Cheap Tablet PC

Stay Connected

rss twitter facebook google pinterest
Get free updates in your inbox!

Subscribe via rss

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Web Hosting UK
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    TextureQualityPro
    Stock Images
    Vector Pack
    365icon
    TexTuts
    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech

    Theme by Kawsar Ali.