I am looking to add animation to my top navigation bar.
Currently, the dropdown menus just appear suddenly when hovering over the links in the top nav.
Development site:
I have attempted the following:
<script>
jQuery(document).ready(function() {
jQuery('.has-drop-down-a').hover(
function(){
jQuery(this).children('.drop').slideDown(200);
},
function(){
jQuery(this).children('.drop').slideUp(200);
}
);
});
</script>
The structure of my HTML is similar to this:
<ul id="nav">
<li class="has-drop-down">
<a href="#" class="has-drop-down-a">Search</a>
<div class="drop">...</div>
</li>
</ul>
I would like the div with the class "drop" to animate downwards instead of appearing instantly.
Edit:
The following code is partially successful - however there are two issues: 1) You need to hover over the link once before it will work. 2) When moving the mouse down over the drop menu, it collapses.
<script>
jQuery('body').ready(function() {
jQuery('.has-drop-down-a').hover(
function(){
jQuery(this).siblings('.drop').slideDown(400);
},
function(){
jQuery(this).siblings('.drop').slideUp(400);
}
);
});
</script>