Try Tuts+ Premium, Get Cash Back!
Quick Tip: How to Write a Neat FlipNav Script
videos

Quick Tip: How to Write a Neat FlipNav Script

on Mar 19th 2010 with 47 comments
Tutorial Details
  • Difficulty: Intermediate
  • Length: 11 Minutes
  • Technology: CSS, jQuery
Download Source Files
Demo View It Online

Somehow, I inadvertently started a navigation series over the last few weeks. It’s purely coincidence, mostly spawned by emails and such. This week, we’re going to mimic the neat navigation functionality, found on JohnMayer.com. Simply mouse over one of the navigation items to see the effect. However, we’re going to make it a bit more flexible by removing the need for images. We’ll achieve the effect using only CSS and JavaScript.

Other Viewing Options

Tags: Videos
 
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.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

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

    Whoo. Looking good so far :)

    • Colin Hoernig

      That effect is really neat, too.

  • Norguad

    Again another great tutorial Jeffrey! Thank you very much!

    P.s.: Do you think, there is a possibility to answer me to my question in your Quick Tip: Different Layouts for Different Widths (http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/) – comment #54 (second from buttom)? Thank you again:-)

  • http://www.emarian.net emarian

    Nice tut. Thanks a lot. I will use this into a drop-down menu.

    • tvt

      Thanks for your tutorial.It is very great.

  • http://www.ackuit.com/cv David Tele Ogundeko

    Great Tutorial Mate, will use this for a client’s navigation I’m working on right now. Sweetness!

  • http://www.emdesigns.de Michael

    This is a really nice effect, I like it. Thanks for this tutorial.

  • Martin

    Very nice tut indeed. I learned some stuff i didn’t even know before, like the .end() function for jQuery and the “queue: false” for .animation(). Quite handy :)

  • http://www.scoresinmotion.com Bart Jacobs

    Well done, Jeffrey! Clear and, as you say, easy to expand without the hassle of adding more images.

  • David Smith

    Wow! Thanks Jeffrey, excellent tut.

  • http://www.atdesigncm.com Thaninrat

    Thank jaff. Great tuts again.

  • DW

    Nice tutorial Jeff!

    Soh Tanaka over sohtanaka.com also wrote a same effect tutorial while back. I think his approach is easier to understand for newbies like me. I dont know :D ….

    http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/

    • http://valendesigns.com Derek Herman

      The difference is that this technique will work if JavaScript is turned off.

  • http://www.25thingsdesign.com Devin

    This is great. You even fixed the queuing problem on the john mayer site.

  • http://sonergonul.com/ Soner Gönül

    Looks like awesome..!

    Thanks

  • first-child

    Nice tut, but part way through I was thinking to myself: “why don’t I use that sexy first-child selector in my code?”
    And then I remembered …

    It’s non existent in ie6 (still running sites with 20% ie6 useage :| )
    It’s buggy in ie7
    It’s buggy in ie8
    ie9 isn’t out yet, and when it is, it’s only for Vista/7 users, and even then, only for sp2 (I think) if they bother to upgrade.

    Sometimes I wish I was Rip Van Winkle … maybe in 10 years this mess will be sorted :P

    • WallMountedHDD

      IE6 is already 9 years old. Anyone who thinks we might have to wait another 10 before we can completely ignore it is downright crazy. The longer people insist on catering to it just because some lazy baby-users out there refuse to upgrade…the longer it’ll linger.

    • Dom

      Yeah, better off adding the styling for the spans w/ js. They’ll only show up with js turned on anyways.

  • http://godsea.adicto.org Jordi Rivero

    wow! awesome… looks really nice

  • http://www.piotrgrzelczak.pl/ Zapp

    Very similar effect can be achieved with css3 only, with -webkit-transition (can’t get it work on -moz though, not sure if it’s not implemented yet, or am I doing sth wrong).
    Check my page while using safari / chrome and rollover on phone / mail addres in top-right corner. Drawback is that it’s for sprites only, but still looking nice :)

  • http://www.askif.info ASLIF

    Hello, very much like your blog

  • Derek

    Very cool. I do have a question though. When going through the code on my own I found that the ‘ ‘ are needed at the end of this line: }, { duration: 200, queue: false })”

    Why are they needed and what is it that they do? Did I miss it in the video?

  • http://sandyboone.com Sandy

    Great tut – going to try it.

    A question: I see on sites a “feedback button” outside of the fixed width wrapper, at edge of window. It feels like this same effect could be used for that application. So, since I’m a NOOB, can you tell me whether I can call this something other than “nav” – like make the id=”feedback” and in the jquery, where it says “nav” replace it with “feedback”?

    I found this code for flipping the text to vertical @ http://www.ssi-developer.net/css/vertical-text.shtml.
    Like so:

    with this in body:
    Test-1

    Seems like it should work in combination with the jquery functions you wrote here.

    Thanks Jeffrey!

  • http://card.emrekilinc.com Emre Kılınç

    Really great tutorial Jeff.Keep it coming…

  • http://www.freshclickmedia.com Shane

    Nice variation on a nav effect – thanks for posting Jeffrey.

  • Gazzooks

    Nice job, I was just looking at a similar article over at Tutorialzine : http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/

    Thank you for your perspective.

  • http://noodlescape.com Noodlescape

    This is awesome! The effect is stunning!

    Thanks for sharing.

  • http://www.mimrankhan.com Imran Khan

    Nice Tutorial … keep going jeffeeeee

  • DaveC

    Thanks Jeffrey this is cool.

    May I suggest making it a bit more keyboard-friendly? You can’t see which nav item has focus (well at least I can’t).

    Perhaps the animation could be triggered by the focus event so it works when you’re tabbing through?

  • http://www.jordanwalker.net Jordan Walker

    That is really fancy, reminds me of a Vegas slot machine!

  • http://mokshasolutions.com Moksha Solutions

    As always all your tutorial are best of the best,

    thanks for it

  • Wesley Martin

    This is awesome. Been really stumped with this type of nav since javascript cant animate backgrounds. Thanks!

  • http://www.fresh-orange-design.com Venezuelan webdesigner

    Great video tutorial, love the way you explain everything and seems to be pretty easy… thanks

  • http://www.crosby-photo.com Brian Crosby

    That is a great tutorial. Anything that avoids the use of images that may slow loading is a great help. thanks for presenting this one. Now I just need to review it a bit more to find other uses.

    Thanks

  • Dru Martin

    Nice work! I like the accessibility and the lack of loading yet another .js plugin. I think I’m going to try a vertical variation of this on a site I’m currently working on.

  • http://www.ahmasud.com Masud

    Looks Awesome! thanks a lot

  • NssY

    Very Nice tutorial,
    I believe that this the jquery.spasticNav.js would be more flexible if somewhere on line 26 it read something like

    }).appendTo(nav); // which refers to the parent ul

    instead of
    }).appendTo(‘#nav’);

    so that if we call it something else in our html it will still work
    eg. on your html page

    $(‘#hornNav’).spasticNav();

    Thanks Jeffery for this tutorial

  • 12345

    WOOOOW

    YOU CAN WRITE DAMN FAST, I ADORE YOU !

  • http://mixedminds.com mixdminds

    Great explanation. Q: on JM’s site each page reflects an active state for the appropriate li menu item. I tried just adding an active class to the CSS here:

    #nav li a:hover,
    #nav li.active {
    background: white;
    color:maroon;
    text-decoration: none;
    }

    But of course that only works if the JS is disabled. So how do I show “active” menu tabs with JS?

  • Alex

    Any tips for active menu?
    I’m currently using:

    li a.active span{
    background:white;
    color:black;
    }

  • Ron

    Awesome!

    I wish all video tutorials were presented as simply and coherently as yours does. thanks.

  • Manu

    Nice tutorial, how do you make it flip down instead of up?

  • Yogesh

    Anyone figure out how to implement an active state?

  • http://www.rugglesisforlovers.com Sherrie

    Hi,

    Cool menu, is there a way to implement an active page state. Also, I noticed that the boxes doesn’t stay fixed. Is there a fix for when resizing the browser window?

  • http://www.foxinabox.co Daniel

    Hi,

    This is great. I am just learning the ins and outs of Javascript and I’m happy to say I was able to follow along rather well :)

    I just have one question though. How would I go about aligning this menu vertically? I’ve tried experimenting with marginTop and some spacing but have been unsuccessful.

    Could you please point me in the right direction?

    Thanks,

    -Daniel

  • Rob

    Firstly, this is a beautiful effect and exactly what I was looking for.

    However, I’m finding it difficult to center the navigation inline properly. Is there another way other than floating the nav to the left/setting a fixed width and just padding it from there?

    I’ve tried text-align, setting my left and right margins to auto, changing the display and a few others but to no success … can anyone help me out?

  • Vee

    Can not download the source files, it goes to an Error 404 page.