Drupal dropdown menu that moves content down - drop-down-menu

Question

I need to have a menu/mega menu that will shift the content down when the dropdown opens like on Facebook for Business menu: https://www.facebook.com/business
I saw the same effect on Avast: http://www.avast.com
Thanks for the help, it's much appreciated!

Answer 1

For behavior you want you can use: slideDown() function of JQuery. Then you can bind mouseover and mouseout events over menu items and call slideDown and slideUp function.
Example in JSFiddle
HTML:
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active menu-item" data-menuItem="#getstarted">
Getting started <b class="caret"></b>
</li>
<li class="menu-item" data-menuItem="#css">CSS</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="col-xs-12 menu-panel" hidden="" id="getstarted">
<ul>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
</ul>
</div>
<div class="col-xs-12 menu-panel" hidden="" id="css">
<ul>
<li>Sign-in page</li>
<li>Sticky footer</li>
</ul>
</div>
</div>
JavaScript:
$(".menu-item").mouseenter(
function(e){
e.preventDefault();
e.stopPropagation();
var $active=$(".active-menu-panel");
$active.removeClass("active-menu-panel").hide();
var selector=$(this).attr("data-menuItem");
if($active.length){
$(selector).addClass("active-menu-panel").show();
} else {
$(selector).addClass("active-menu-panel").slideDown();
}
}
);
$(".menu-panel").mouseleave(function(){
$(this).removeClass("active-menu-panel").slideUp();
});