tobypitman.com

jQuery style menu with CSS3

css3menu

Here’s a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks people use. The outcome was a really simple animated sliding verticle menu.

If you want to view the demo you’ll need the lastest Safari version or even better go get the latest nightly build of webkit. This might even work in Chrome but I haven’t checked it. Oddly enough it didn’t seem to like it on OSX Tiger in Coda but in Leopard it was fine? This is all a long way off anyway but good fun to play with!

Menu Demo

First off in the demo you might notice the gradient which is CSS too. Really easy to do that with this….

body { background: -webkit-gradient
           (linear, left top, left bottom, from(#ccc), to(#fff));
}

Now we’ll style the un-order list with some padding and a background image to create a ridge like effect that our menu items will appear out of. The cool thing about this is by using -webkit-background-size’ the image is stretched if you add more items to it making the whole thing a bit more dynamic.

ul#nav {
    list-style: none;
    display: block;
    width: 200px;
    position: relative;
    top: 100px;
    left: 100px;
    padding: 60px 0 60px 0;
    background: url(shad2.png) no-repeat;
    -webkit-background-size: 50% 100%;
}

Everything else is pretty bog standard really. A simple un-ordered list and that’s about it. The styling for the list item anchor tags is where it all happens. The addition of the ‘-webkit-transition:’ is going to allow us to animate to the ‘:hover’ state.

ul#nav li a {
    -webkit-transition: all 0.3s ease-out;
}

It says ‘all’ animatable properties should animate over 300ms using ‘ease-out’, similar to jQuerys easing functions.

Next we’ll add the styling for the anchor tags with some fancy -webkit-border-radius and -webkit-box-shadow to give it some shape and depth and complete it with a backgroung image for each item to enhance our interface effect, making them look like their coming from underneath the ridge.

ul#nav li a {
    -webkit-transition: all 0.3s ease-out;
    background: #cbcbcb url(border.png) no-repeat;
    color: #174867;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    width: 100px;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px #888;
}

The properties we’re going to style are color, background-color and left-padding so let’s add them to the hover: state.

ul.nav li a:hover {
    background: #ebebeb url(border.png) no-repeat;
    color: #67a5cd;
    padding: 7px 15px 7px 30px;
}

That’s about it really. No javascript and exactly the same effect. Probably be easy to make this degrade nicely for “certain” browsers. Now all you have to do is wait!

Posted on Saturday, December 20th, 2008 at 1:25 pm.

Filed under CSS.

54 Responses to “jQuery style menu with CSS3”

  1. [...] jQuery Style Vertical Menu with CSS3 – No Javascript [...]

  2. moabi says:

    works perfect in chrome, very nice demo…

  3. [...] jQuery Style Vertical Menu with CSS3 – No Javascript [...]

  4. [...] jQuery Style Vertical Menu with CSS3 – No Javascript [...]

  5. Andreas Z. says:

    Here is what you have to add/change to get it working in Firefox 3.7 nightly, although it everything except -moz-transition will also work for 3.6:

    background: -moz-linear-gradient(top, #ccc, #fff);

    -moz-background-size: 50% 100%;

    -moz-transition: all 0.3s ease-out;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-box-shadow: 2px 2px 4px #888;

    Please notice that border and background changes aren’t only replacing ‘webkit’ with ‘moz’

  6. [...] jQuery Style Vertical Menu with CSS3 – No Javascript [...]

  7. Very cool tutorial. I am currently using jQuery a lot, but to find so many cool CSS3 features are thumbs up!

  8. [...] Depth And Nice 3D Ribbons Only Using CSS3CSS3 Chunky MenuCSS3 Dropdown MenuPretty CSS3 ButtonsjQuery style menu with CSS3CSS3-only horizontal drop line tab menuSimilar PostsHow to Make a CSS Sprite Powered MenuHow to [...]

  9. [...] Menu)Menu com efeito Dropdown (CSS3 Dropdown Menu)Botões legais com CSS3 (Pretty CSS3 Buttons)Menu estilo jQuery (jQuery style menu with CSS3)Menu com abas e dropline apenas com CSS (CSS3-only horizontal drop line tab menu)Espero que tenha [...]

  10. [...] CSS3 模拟 jQuery 菜单效果 [...]

  11. Andry says:

    Nice articles, but i think it’s helpful if you can make a link to downloads source code.

    • Toby says:

      Hi,

      You can see the source code by going to the demo and viewing the source code in your browser.

      Pretty simple really. :)

      Toby

  12. That looks pretty cool. Btw, it works in Chrome rather well. Although I am using Chrome 5 beta.

  13. Indialike says:

    Very nice and useful tutorials for web designers,
    Thanks for posting.

  14. [...] Довольно незатейливое меню-закладки. Туториал и демо можно найти тут. [...]

  15. [...] jQuery style menu with CSS3 [...]

  16. [...] jQuery style menu with CSS3 [...]

  17. [...] jQuery Style Vertical Menu with CSS3 – No Javascript In this tutorial you will learn how to create an animated sliding vertical menu using some cool CSS3 properties, like ‘-webkit-transition:’ which will allow you to animate the ‘:hover’ state of a simple un-ordered list. By adding styling to the anchor tags some fancy -webkit-border-radius and -webkit-box-shadow you will give the menu some shape and depth and complete it with a background image for each list item to enhance the interfaces effect – Basically, making them look like their coming from underneath the ridge. [...]

  18. [...] 27. jQuery Style Menu With CSS3 [...]

  19. seokomail says:

    hei, nice one. i’ll try this css3 style.
    But slill Easier for me jQuery

  20. Julian says:

    Hello! Nice tutorial. Is it possible to mirror that navigation?

  21. [...] jQuery Style Vertical Menu with CSS3 – No Javascript [...]

  22. carson says:

    great tutorial, thanks for sharing.

  23. This is an excellent work/tutorial, what about the IE compatibility issues? Good for newbies and freelancer who deals in SEO and Web Design and Development projects.

  24. lioliksun says:

    Thanks! Helpful information!

  25. [...] menú de estilo CSS3 con jQuery [...]

  26. [...] jQuery Style Vertical Menu with CSS3 – No Javascript [...]