Response title
This is preview!
how to animate vertical menu on hover or on click
in Using jQuery
•
9 years ago
on hover i want to pop out that menu by increasing the width an d height of li ....but as i over that menu is going in the last and not getting animated plz suggest
function justclick(e)
{
$("#" + prevClick).removeClass("active");
$("#" + e.id).animate({
width: "200px",
height:"50px",
fontSize: "24px",
borderWidth: "5px"
}, 1500,function() {
$("#" + e.id).addClass("active");
}
);
// $("#" + e.id).animate({opacity: 0.1}, 'slow', function() {
//$("#" + e.id).addClass("active");
// $("#" + e.id).animate({opacity: 1});
// });
prevClick = e.id;
}
<div>
<ul style="list-style:none" id="nav">
<li style="height:35px;width:100px;margin-right:0px;"><a href="#intro" id="home" class='active' onclick="justclick(this)" style="width:74px;height:28px;">HOME</a></li>
<li style="height:35px;width:100px;margin-right:0px;"><a href="#second" id="about" onclick="justclick(this)" style="width:100px;height:28px; ">ABOUT</a></li>
<li style="height:35px;width:100px;margin-right:0px;"><a href="#third" id="media" onclick="justclick(this)" style="width:100px;height:28px;">MEDIA</a></li>
<li style="height:35px;width:100px;margin-right:0px;"><a href="#fourth" id="brands" onclick="justclick(this)" style="width:100px;height:28px;">BRANDS</a></li>
<li style="height:35px;width:100px;margin-right:0px;"><a href="#fifth" id="events" onclick="justclick(this)" style="width:100px;height:30px;">EVENTS</a></li>
<li style="height:35px;width:100px;margin-right:0px;"><a href="#sixth" id="contacts" onclick="justclick(this)" style="width:100px;height:30px;">CONTACTS</a></li>
<li style="height:35px;width:100px;margin-right:0px;"><a href="#seventh" id="resources" onclick="justclick(this)" style="width:100px;height:30px;">RESOURCES</a></li>
</ul>
</div>
1