Awesome CSS3 Menu With jQuery Fallback – New on Premium
plusvideos

Awesome CSS3 Menu With jQuery Fallback – New on Premium

on Sep 6th 2012 with 17 comments
Tutorial Details
  • Topic: HTML/CSS
  • Difficulty: Intermediate
  • Screencast duration: 1 hr 10 mins

Final Product What You'll Be Creating

Demo View It Online

In this Premium screencast tutorial I’ll show you how to build an awesome, versatile navigation menu. It features notification bubbles, a Mega Menu and unlimited sub menus (as we’ll be smart with our CSS selectors). There’ll be some cool CSS3 transitions, plus we’ll write a jQuery plugin to rescue older browsers which don’t support the effects.


Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

Quick Preview

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.

Joren Van Hee is joren on Codecanyon
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Joren Van Hee is a student from belgium, with a passion for webdevelopment. Besides all that nerdy stuff, he also plays the drums.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Vasil

    private video ? :(

    • http://laranz.in Lawrence77

      Not private, its premium series. You can buy a 19$/Month membership you can access to 100s of tutorials and awesome *Spoon feeding Video Courses*. You will be loving it for sure.

  • Hamid

    Trust me Vasil just try it:-)

  • Hamid

    wow guys:o just try the online demo on the top, it’s clean and modern! like the animation of it!

    good job Joren, post some css3+jquery articles as i see in some websites they do too. it’s a new featuring i guess!

  • GAvin

    Looks great!

    We have come a long way, shame jQuery has to be a fallback for CCS3, it used to be the other way around

    • http://eichefam.net Paul

      @GAvin Why is it a shame?

  • David

    Resize your browser…

  • Gavin

    Nice tutorial but I do however feel you cannot do away with the fact of mobile integration. Menus need to be created to accomodate mobile, its where everything is leading to.

  • Fran

    I followed this and copied the text using Sublime Text and Compass and I have created a few different menus based your clean markup which can be easily change with variables.

    However, I could not get the slider effect to work without adding to your css for slider.css

    your selectors were:

    .slide ul

    &

    .slide li:hover > ul

    I had to change them to:
    .slide ul, .slide li>div
    &
    .slide li:hover>ul, .slide li:hover>div

    Have I made a mistake somewhere or should you have targeted the div as I have to get the slider to work.

    Is this an oversight on your part or a mistake somewhere in my code.

    • http://jorenvanhee.com Joren Van Hee
      Author

      I think you’ve forgotten it. I do those changes in part 3 at 15 minutes :)

      • Fran

        Hi Joren,

        I didn’t build a mega menu, I stopped after part 2. Thanks for your help.

  • http://www.brookswebdesign.net Maria

    I just tried the demo…..this is sweet!! I’m loving the mega menu that comes in handy for e-commerce sites. Thanks Joren!

    • http://jorenvanhee.com Joren Van Hee
      Author

      Thanks I’d to see it in action!

  • Brian

    Any ideas on a quick solution to make this navigation Accessible for Keyboards?

    • http://jorenvanhee.com Joren Van Hee
      Author

      You could add a .hover class to the list items, when the anchor gets focus (with jQuery). I’ve made a little snippet here: http://pastebin.com/SY1YNsLY

      • Brian

        Thank you so much, works perfectly! Nice simple solution.