I have website with a header div, within the header I have a basic 1 level menu. I have used an .animate function in combination with easing to make the menu appear:
CSS:
#header {
width: 65%;
max-width: 960px;
height: 50px;
line-height: 50px;
margin: -50px auto 0;
overflow: hidden;
position: relative;
z-index: 1;
}
Javascript:
$("#header").animate({top: '+=70'}, 700, 'easeOutBounce');
There is one page though where I have a seconde level submenu. What I try to acomplish is that when the main menu is in place the submenu is fading in and sliding down from its parent position.
This is what I have to make this work:
CSS:
#menu ul {
margin:0 0 0 10px;
white-space:nowrap;
float:left;
position: absolute;
}
Javascript:
$(document).ready(function() {
$('#submenu').hide();
$("#header").animate({top: '+=70'}, 700, 'easeOutBounce', function(){
$('#submenu').fadeIn(400).animate({top: '+=40'}, 400);
});
});
The function is working but instead that it is appearing from behind its parent (menu), it is coming from outside of the viewport, then you see it for a second and start indeed to fade in and animates dowwn to below the parent. On this page you can see what I mean. What should I do to make it appear from the parrent. Thank you in advance.