Question

Can anyone suggest css based mega menu, which slides down the web site below menu (when opened) and slides up the web site when menu is closed. Or how this type of menu can be built.

Thanks in advance

Answer 1

can use css transitions. but without javascript you cannot trigger the animation by mouseclick.

.slidemenu
{
    height: 0;
    background: red;
    transition: height 1s ease 0s;
    overflow: hidden;
}

.slidedown
{
    height: 20px;
}

when you add .slidedown class to menu, it will slide down. when remove – slide up

http://jsfiddle.net/TXkWB/

updated (20 mar 2014):

There is possibility to open menu using only css (http://jsfiddle.net/RMfSB/). It is probably useless because menu will close after loose focus, but it works.