18
jQuery “flash like” menu
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!
Author: Cedric Dugas
Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.
30 Comments to “jQuery “flash like” menu”
Leave a comment
Articles
Some Tweets
- kind of old, bit I like it http://www.thereisnopagefold.com/
- I really have a love/hate relationship with the E texteditor, so good but so bad at the same time
- onclick on a form instead of submit? Please never do javascript again
- Question: do you think the mobile web has a viable market right more? Pretty hard to convince clients to invest
- I meant jquery mobile.. meh
- Looks like sencha touch will have competition, jquery touch is looking hot!
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.
[...] jQuery “flash like” menu « Position Absoluteposition-absolute.com [...]
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!
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.
…
Very Creative Thank you
Thank you for sharing these kinds of tips, really superb
[...] 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) [...]
[...] ใครที่กำลังมองหาเมนู 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. [...]
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.
[...] Questo è un piacevole esempio di utilizzo di jQuery per animare il vostro menù: http://www.position-absolute.com/ [...]
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.
[...] 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 [...]
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?
[...] 2 : jQuery “flash like” menu Demo Hướng dẫn [...]
[...] Demo | Yapılışı [...]
same issue, FF3.5
nice job!
MUito legal esse tutorial
Abraços
http://www.felipegenuino.com
[...] 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. [...]
[...] jQuery “flash like” menu [...]