Jquery Animated menu hover
<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<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>
<a href="http://tutorial101.blogspot.com/" title="Go to homepage">Home</a>
</li>
<li>
<a href="http://tutorial101.blogspot.com/" title="Find out who I am">About</a>
</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>
VIDEO
Download images
