I was looking at a flash website last night and saw some nice menu effects. I was pretty sure this was easy to re-create in jQuery, so I started coding, and about 2 or 3 hours later, there it was, a nice little jQuery plugin. I know this will not be useful in most website as it take a huge chunk of space, but it is still pretty cool to know you could use this in a more experimental jQuery website.
When you rollover one item of your menu, the font-size expand to 225%, the color fade to yellow and the other items are giving more space to the hovered item, when you roll out it will take its place back in the menu.
Get this to work
First add dependencies in your head document, you will need jQuery ui for this plugin.
<script src="js/jquery.js" type="text/javascript"></script> <script type="text/JavaScript" src="js/jquery.menuZoomer.js"></script> <script type="text/JavaScript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
In your menu, add to each item the class flashMenu.
<a href="Portfolio.html" class="flashMenu">Portfolio</a>
Customization
You can customize the speed, font-size and easing, look for your document ready in the file jquery.menuZoomer.js, you may need to tweak the line-height.
$("a.menuFlash").hoverSize({
speed:400,
fontColor:"#d7df23",
fontSize : "300%",
lineHeight:"39px",
easing : "easeOutExpo"
})That’s it !
Download the source code View demo
Tested on:
Firefox 3+
Internet Exploder 6&7
Safari 4
If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!
If you want to become successful developer then join testkings online platform and get thousands of free testking 70-620 tutorials and testking RH302 study guides prepared by experts to provide you useful information on how to shake up your web pages using jQuery flash like menu.
Nice plugin as always!
Nice fishey effect on natural text. Good going!
“and about 2 or 3 hours later” – That’s the problem with jQuery at the moment, the same effect in flash would take about 10 minutes.
@james : Not really, this is done with float, with Flash you would need to calculate pixel between items and move them manually, I’m pretty sure that would take longer to code.
Unfortunately I had a strange bug with IE, jQuery UI and line-height animations, this is what took the longest.
Nice tutorial. Added to http://tutlist.com
pretty cool, to see that with js. Nice job.
@Cedric Dugas: No…I’d agree with James, it’d take about 10 minutes to code….and you wouldn’t get any bugs in IE 😉
And in Flash you could actually get a real fisheye effect, not just a rollover/rollout animation.
This is awesome. I was looking for something like this only recently, but shelved the project because I did not believe this sort of effect could be done without Flash, making my site impossible for iPhone users to navigate. This on the other hand seems perfect!
Very Creative Thank you
Thank you for sharing these kinds of tips, really superb 🙂
Nice job. But I dont think it is as good as in flash. Its not that smoth…
A similar effect – without smooth transition – can be achieved with simple CSS, without Javascript. And please consider a fallback solution for those who don’t use javascript. It’s really simple.
It’s annoying to see “cool jQuery tutorials” that don’t follow the simplest rules of progressive enhancement. And this should be the base of everything you do with jQuery.
@Jens I think what you find annoying is easy to do yourself in 30 seconds with a stylesheet, also I do not think this effect without the transitions would look good, I would certainly fallback to a more normal rollover effect.
but as I said, It take very small css skill to code a rollover in css and did not think it was necessary to add.
This would really work nice with the jquery hoverflow plugin.
I think it’s a great subtle and funny menu. Implemented at http://www.mutealbino.com.
Only bug I can see (I use Firefox most of the times) is in Safari : leaves red sparkle marks on the background.
hmm i noticed that it seems to break in FF3 when you sweep quickly back and forth over the links a few times. its almost as if the links stop responding to the hover, and they no longer increase in size until you click somewhere on the page.
@O’Ryan : yea, it look like there is a bug, it probably been introduced in ff3.5, it was working fine with 3.0 from what I can remember, I will have a look.
Is there a similar way to achieve this with imagery rather than fonts?
same issue, FF3.5
nice job!
MUito legal esse tutorial
Abraços
http://www.felipegenuino.com
I tried to apply this effect in the menu using jquery to get Cufon with custom fonts, that way the zoom does not work, please help me!
Hi, your write-up is extremely instructive and I actually like the content exactly where in each detail is very important. By some means, it provides me more understanding about things that’s happening nowadays. But I was really difficult to find it with yahoo. Maybe you should improve it with seo plugins for wordpress like WP seo. Just a tip..
Wow really nice menu with jQuery really its looks alike like flash menu…. and also some useful articles related to jquery…
Thanx a lot!!!!!!!
I will right away snatch your rss feed as I can not find your e-mail subscription hyperlink or newsletter service. Do you have any? Please let me understand in order that I could subscribe. Thanks.