jQuery “flash like” menu

by Cedric Dugas on June 18, 2009

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.

View demo

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!





Ads

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.



35 comments

Nice plugin as always!

by Steven on June 18, 2009 at 1:35 pm. #

Nice fishey effect on natural text. Good going!

by moog on June 18, 2009 at 11:45 pm. #

“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.

by James on June 19, 2009 at 4:13 am. #

@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.

by Cedric Dugas on June 19, 2009 at 7:57 am. #

[…] jQuery “flash like” menu « Position Absoluteposition-absolute.com […]

by jQuery “flash like” menu « Position Absolute « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit on June 19, 2009 at 9:15 am. #

Nice tutorial. Added to http://tutlist.com

by TUTlist on June 19, 2009 at 10:34 am. #

pretty cool, to see that with js. Nice job.

by kevin on June 19, 2009 at 12:25 pm. #

@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.

by Alex on June 19, 2009 at 12:45 pm. #

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!

by Will on June 19, 2009 at 2:14 pm. #

A jQuery “flash like” menu…

A nice little menu effect, when you rollover one item of your menu, the font-size expand to 225% giving it a really “flash” feel.

by CSS Brigit | A jQuery “flash like” menu on June 20, 2009 at 9:56 am. #

Very Creative Thank you

by sonichtml on June 20, 2009 at 10:49 pm. #

Thank you for sharing these kinds of tips, really superb :)

by Amarjit Singh Kullar on June 21, 2009 at 1:31 am. #

[…] jQuery “flash like” menu « Position Absolute "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." (tags: jquery javascript webdesign menu css programming plugin zoom) […]

by links for 2009-06-22 | Yostivanich.com on June 22, 2009 at 9:04 am. #

[…] ใครที่กำลังมองหาเมนู Flash สวยๆ ต้องนี่เลยครับ  jQuery-flash like menu เมนู Flash สวยๆ อีกตัวที่น่าใช้อีกตัวครับ ดูตัวอย่างและดาวน์โหลดโค้ดได้ที่นี่ครับ  Demo & Download You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

by 9sert.com » jQuery-flash like menu on June 23, 2009 at 8:27 pm. #

Nice job. But I dont think it is as good as in flash. Its not that smoth…

by Chris on June 25, 2009 at 5:46 am. #

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.

by Jens Grochtdreis on June 25, 2009 at 6:28 am. #

@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.

by Cedric Dugas on June 25, 2009 at 10:52 am. #

This would really work nice with the jquery hoverflow plugin.

by solid on June 25, 2009 at 2:43 pm. #

[…] Questo è un piacevole esempio di utilizzo di jQuery per animare il vostro menù: http://www.position-absolute.com/ […]

by jQuery “flash like” menu | Web Design on June 30, 2009 at 5:39 am. #

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.

by Stip on July 14, 2009 at 2:18 pm. #

[…] giving more space to the hovered item, when you roll out it will take its place back in the menu. Web Site Demo Download AKPC_IDS += “705,”;Popularity: unranked [?] Share and […]

by jQuery Tutorial – Create A jQuery Flash Like Menu | jQuery Wisdom on October 17, 2009 at 1:05 am. #

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.

by O'Ryan on November 16, 2009 at 1:33 am. #

@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.

by Cedric Dugas on November 16, 2009 at 9:12 am. #

Is there a similar way to achieve this with imagery rather than fonts?

by Dianna on November 24, 2009 at 2:24 pm. #

[…] 2 : jQuery “flash like” menu Demo Hướng dẫn […]

by 13 bài hướng dẫn tạo hiệu ứng cho menu bằng jquery on December 13, 2009 at 11:48 pm. #

[…] Demo | Yapılışı […]

by MetroDizayn.com » Link’lerinizi animasyon ile yapmanın 10 yolu on January 17, 2010 at 6:58 pm. #

same issue, FF3.5

nice job!

by @Cedric Dugas on January 24, 2010 at 6:32 am. #

MUito legal esse tutorial
Abraços

http://www.felipegenuino.com

by Felipe on January 26, 2010 at 8:13 pm. #

[…] Un piccolo articolo sulla creazione di menu flash-like con jQuery è presente sul sito di Position Absolute, un sito canadese di webdesign. Il framework jQuery offre numerose possibilità e questa presentata nel sito è una delle più semplici ma comunque utilissime. […]

by Webdesign: le risorse della settimana | Principio di Indeterminazione on February 3, 2010 at 3:23 pm. #

[…] jQuery “flash like” menu […]

by SUPER USEFUL JQUERY « Designdefine's Blog on April 13, 2010 at 10:07 am. #

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!

by Brício Fernandes on September 22, 2010 at 6:14 pm. #

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..

by Free arcade flash game on November 19, 2010 at 11:08 pm. #

Wow really nice menu with jQuery really its looks alike like flash menu…. and also some useful articles related to jquery…
Thanx a lot!!!!!!!

by asp.net on January 6, 2011 at 5:14 am. #

[…] 9. jQuery “flash like” menu […]

by 10 Hot Awesome Ways to Animate Your Hyperlinks on July 26, 2011 at 2:21 pm. #

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.

by website builder on April 8, 2013 at 12:31 pm. #