Search Options
close
Search the following clips:
All Clips
Everyone's Clips
My Guides
Sign Up
Install
Learn More
Login
menu css
piero31
follow
0
7-23-2008 3:37 AM
54 views
Add a Comment
Login
to Comment. Not a member yet?
Sign up
Related Clips
Blest Be the Tie That Binds
Religious Hate Speech
Killer Insects
Ancient Peru Pyramid Spotted by Satellite
Shark with webbed feet
Vets Report Card: McCain=D; Obama=B
4 Unhealthy Snacks
Today's Top Clips
The rival to the Bible
Female Fighters: We Won't Stand for Male Dominance
Scientists create solar cells with a twist.
Different nesting options :)
The Surge has Worked
Layers of Red Cliffs on Mars (Photo)
Our "Digital Shadow" -a Mind-Bending Prediction
Clive Thompson: Why Veteran Visionaries Will Save the World
Obama Hatred at McCain-Palin Rallies: "Terrorist!" "Kill Him!"
Bush snubs Iran breakthrough opportunity
visit the
Top Clips page
View the Top Clips from
July 23, 2008
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/bd78bd77-c38c-4723-bd8b-0f0ba8744542/E1701293-51CB-445C-97FD-BCEBDD4056DC/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://css-tricks.com/garage-door-style-menu-using-animated-background-images-with-jquery/" href="http://css-tricks.com/garage-door-style-menu-using-animated-background-images-with-jquery/" style="font-size: 11px;">css-tricks.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://css-tricks.com/garage-door-style-menu-using-animated-background-images-with-jquery/"><P>Then we bind the “hover” event to each page element with the class of “link”. Remember we applied that class to each anchor link in the markup. We could have just used “a” as the target here, but that is dangerous as it is likely there will be more anchor links on any page this is actually used, so better to target a specific class. So when the hover event occurs over a page element with a class of “link”, jQuery finds the <STRONG>parent element</STRONG>, and does the background-position animation on that element. In our case, the LI element, with the unique shutters. Using the call-back function of the hover event (e.g. when the mouse leaves the area) we can animate the shutter back into position.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://css-tricks.com/garage-door-style-menu-using-animated-background-images-with-jquery/"><P>And there we have it, a nice looking menu with a pretty neat animated effect!</P></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;"> </td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/E1701293-51CB-445C-97FD-BCEBDD4056DC/blog/" title="blog or email this clip"><img src="http://content9.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
Clipmarks
Home
New Clips
Top Clips
Dashboard
Popular Topics
News
Life
Science
Technology
Entertainment
Get Started
Sign Up
Install Clipping Tool
How Clipping Works
Clip-to-Blog™
ClipSearch
Tools and Resources
FAQ
ClipWeek
Top Clippers
Top Tags
Site Map
About Clipmarks
About Us
Contact
Blog
Copyright
Privacy
EULA
OK