Ольга Жижка

https://codepen.io/hoichi/post/json-to-jade-in-gulp - вот здесь есть одно из решений .

Спасибо большое за ответы! На codePen нашла похожую реализацию такой анимации -
codepen.io/jkiss/pen/OVEeqK

Спасибо большое! Увидела что не добавила еще сам блок. С Вашей помощью работает вот так:

var $items = $(".menu-main-item");
	var $block = $(".menu-mega");
    var options = { duration: 400, easing: 'easeInOutCubic' };
    $items.on('click', function () {
        var DataItem = $(this).attr('data-item');
        var $current = $('#'+ DataItem);
        // Закроем все, кроме текущего
        $block.not($current).slideUp();
        // Переключим текущий
        $current.slideToggle();
    });

Благодарю!

C Вашей помощью получился вот такой код для мега меню, раскрывается по нажатию на соответствующую ссылку, по нажатию на другую область, в том числе body, сворачивается, и остается кликательным в открытом состоянии для перехода по ссылкам.

$(function() {		
	
	$(".styled").selectbox();
	
	var $items = $(".menu-main-item");
	var $block = $(".menu-mega");
    var options = { duration: 400, easing: 'easeInOutCubic' };
    $items.on('click', function () {
        var DataItem = $(this).attr('data-item');
        var $current = $('#'+ DataItem);
        $block.not($current).slideUp(options);
        $current.slideToggle(options);
		return (false);
    });
	$('body').click(function(){ $block.slideUp(options); });
	$block.click(function (e) { e.stopPropagation(); });
});

Еще раз спасибо за помощь!