Create a Slick Menu using CSS3

17. Feb, 2010 38 Comments

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.

Here is the demo of what we are about to create.

LIVE DEMO

Lets create the html used.

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Twitter @insic</a></li>
</ul>
</div>
</div>

Now the CSS.

Lets add a gradients using CSS3 gradient property into our wrapper div.

.wrapper {
    width: 100%;
    height: 80px;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    position: relative;
    margin-bottom: 30px;
}

The CSS code for the menu item.

ul {
    margin: 0;
    padding: 0;
}

ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}

ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }

ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

ul li a:hover {
    background: transparent none;
}

ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
LIVE DEMO

References:

You can view a tutorial here creating the same menu effect using CSS sprite and jQuery.

PG

Author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

Related Post

Delicious
Tutorials, Works
,

38 Responses to “Create a Slick Menu using CSS3”

  1. Benjamin Reid Reply 17. Feb, 2010 at 8:47 am

    It’s nice to see this being done with only CSS, CSS3 can’t come soon enough.

    I didn’t know you could do radial gradients either, they look better quality than images as they’re not compressed by the ‘Save for web’ process.

    It’d be nice to see some explanation of the new gradient properties in this article but hey, great none-the-less.

    • insic Reply 17. Feb, 2010 at 8:53 am

      Thanks Benjamin! The gradient property details can be read in the reference links I have provided. I opt not to include it in this post. :)

  2. retop Reply 17. Feb, 2010 at 12:35 pm

    There seems to be a problem hovering the non-linked description text in the third and fourth example.

  3. James B Reply 17. Feb, 2010 at 5:29 pm

    This is great, thanx.
    One thing, the link to the tutorial (http://www.shopdev.co.uk/blog/animated-menus-using-jquery/) using css sprite and jquerey comes up with gibberish, the link is good but the page it refers to show what appears to be compiled code?

  4. SM Reply 18. Feb, 2010 at 9:24 am

    Useful post. Thanks

  5. """ Saad Ahmed """ Reply 20. Feb, 2010 at 7:49 am

    What A nice Work.

  6. Jack Reply 24. Feb, 2010 at 12:59 pm

    Awesome! Thanks a lot. Gotta use this definitely.

  7. Ryan Cowles Reply 16. Mar, 2010 at 8:44 pm

    This is a great menu! I also hadn’t seen the radial gradients before, but what a nice surprise. Very nice work, and thanks for the tutorial!

  8. andres Reply 03. May, 2010 at 5:10 pm

    maybe im doing this wrong but the -moz- transition properties dont work for me in firefox while the webkits do work in chrome.

    • andres Reply 03. May, 2010 at 5:13 pm

      okay i figured it out. turns out firefox does’t support its own transition properties yet but that changes in v3.7 due out later this year anyways thnx 4 the tut. :]

  9. moufeed Reply 16. Jul, 2010 at 9:29 am

    I’m really happy today
    Tahnks

Leave a Reply