Quick Tip: How to Write a Neat FlipNav Script
Tutorial Details
- Difficulty: Intermediate
- Length: 11 Minutes
- Technology: CSS, jQuery
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
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
Cloud Networks Australia - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Whoo. Looking good so far
That effect is really neat, too.
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:-)
Nice tut. Thanks a lot. I will use this into a drop-down menu.
Thanks for your tutorial.It is very great.
Great Tutorial Mate, will use this for a client’s navigation I’m working on right now. Sweetness!
This is a really nice effect, I like it. Thanks for this tutorial.
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
Well done, Jeffrey! Clear and, as you say, easy to expand without the hassle of adding more images.
Wow! Thanks Jeffrey, excellent tut.
Thank jaff. Great tuts again.
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
….
http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/
The difference is that this technique will work if JavaScript is turned off.
This is great. You even fixed the queuing problem on the john mayer site.
Looks like awesome..!
Thanks
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
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.
Yeah, better off adding the styling for the spans w/ js. They’ll only show up with js turned on anyways.
wow! awesome… looks really nice
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
Hello, very much like your blog
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?
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!
Really great tutorial Jeff.Keep it coming…
Nice variation on a nav effect – thanks for posting Jeffrey.
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.
This is awesome! The effect is stunning!
Thanks for sharing.
Nice Tutorial … keep going jeffeeeee
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?
That is really fancy, reminds me of a Vegas slot machine!
As always all your tutorial are best of the best,
thanks for it
This is awesome. Been really stumped with this type of nav since javascript cant animate backgrounds. Thanks!
Great video tutorial, love the way you explain everything and seems to be pretty easy… thanks
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
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.
Looks Awesome! thanks a lot
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
WOOOOW
YOU CAN WRITE DAMN FAST, I ADORE YOU !
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?
Any tips for active menu?
I’m currently using:
li a.active span{
background:white;
color:black;
}