1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Jquery Animated menu hover</title><script type="text/javascript">$(document).ready(function(){ $(".menu2 a").append("<em></em>"); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); });});</script></head><body><ul class="menu2"> <li> </li> <li> </li> <li> <a href="http://tutorial101.blogspot.com/feeds/posts/default" title="Subscribe RSS feeds">Subscribe RSS</a> </li></ul><style type="text/css">body { margin: 10px auto; width: 570px; font: 80%/120% Arial, Helvetica, sans-serif;}.menu2 { margin: 100px 0 0; padding: 0; list-style: none;}.menu2 li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center;}.menu2 a { padding: 14px 10px; display: block; color: #000000; width: 144px; text-decoration: none; font-weight: bold; background: url(img/button00.gif) no-repeat center center;}.menu2 li em { font-weight: normal; background: url(img/hover000.png) no-repeat; width: 180px; height: 45px; position: absolute; top: -85px; left: -15px; text-align: center; padding: 20px 12px 10px; font-style: normal; z-index: 2; display: none;}</style></body></html> |
