Как сделать плавное появление мегаменю?

Question

[Евгений Сидаш]

Здравствуйте!

У меня есть на сайте (wordpress) мегаменю, работает исправно и как нужно, но я хочу добавить плавности в его появлении/исчезновении. На данный момент оно появляется/исчезает мгновенно при наведении мышью на родительский пункт.

Дело в том, что по умолчанию это самое мегаменю имеет стиль "display: none;":

Поэтому transition не подходит, насколько я понимаю.
При наведении мыши на родительский элемент ему добавляется класс "hover", и у самого мегаменю "display: none;" меняется на "display: block;" отрабатывая мгновенно, без какой либо плавной анимации.


Есть ли решении на CSS3? Или нужно решать с помощь JS? Какие вообще могут быть варианты?))

Comments

[Василий Пупкин]

Знать бы еще какой именно плагин вы используете.
Их как грязи и все мегаменю себя кличут.

[Игорь Воротнёв]

Прекратите тег-спам и не ставьте лишние теги, "WordPress" тут вообще ни при чем, так же как и "навигация пользователя". Это задача чисто по CSS.

[Евгений Сидаш]

Игорь Воротнёв, прислушаюсь к вашему замечанию, спасибо.

[Евгений Сидаш]

Василий Пупкин, это стандартное меню шло вместе с темой от BeTheme

Answer 1

[Юрий]

В скрытом состоянии замените display:none; на:

visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all .3s ease;

Для класса .hover допишите:

visibility: visible;
transform: translateY(0);
opacity: 1;

Comments

[Евгений Сидаш]

Ваше решение кажется простым и правильным, но у меня сложность как раз с поиском того места, где применить эти параметры.
display: none; / display: block; генерируютя через JS и как найти именно тот элемент пока не получается.

Я в поиске в Sublime Text искал и нашел подобный код:

/**
 * MuffinMenu 
 * 
 * Horizontal Multilevel Menu with WP MegaMenu Support 
 * 
 * 3.0 | Muffin Group
 */

 (function( $ ){
 	"use strict";
 	
 	$.fn.mfnMenu = function( options ){

 		var menu = $(this);
 		
 		var defaults = {
 			addLast		: false,
 			arrows      : false,
 			delay       : 100,
 			hoverClass  : 'hover',
 			mobileInit	: 768,
 			responsive	: true
 		};
 		options = $.extend( defaults, options );
 		
 		
 		var init = function(){
 			
			// add '.submenu' class
			$( 'li:has(ul)', menu ).addClass( 'submenu' );
			
			// append mobile toggle button
			$( 'li:has(ul)', menu ).append( '<span class="menu-toggle"></span>' );
			
			// add '.mfn-megamenu-parent' class
			menu.children( 'li:has( ul.mfn-megamenu )' ).addClass( 'mfn-megamenu-parent' );	
			
			// add '.last-item' class
			$( '.submenu ul li:last-child', menu ).addClass( 'last-item' );
			
			// add '.last' class
			if( options.addLast ) {
				$( '> li:last-child', menu ).addClass( 'last' )
				.prev().addClass( 'last' );
			}
			
			// appand submenu arrows
			if( options.arrows ) {
				$( 'li ul li:has(ul) > a', menu ).append( '<i class="menu-arrow icon-right-open"></i>' );
			}

		};
		
		
		var doMenu = function(){

			if( ( window.innerWidth >= options.mobileInit ) || ( ! options.responsive ) ){
				
				// desktop --------------------------------

				$( '> li, ul:not(.mfn-megamenu) li', menu ).hover(function() {
					
					$(this).stop(true,true).addClass( options.hoverClass );
					
					$(this).children( 'ul' ).stop(true,true).fadeIn( options.delay );
					
				}, function(){
					
					$(this).stop(true,true).removeClass( options.hoverClass );
					
					$(this).children( 'ul' ).stop(true,true).fadeOut( options.delay );	
					
				});
				
			} else {

				// mobile ---------------------------------
				
				$( 'li', menu ).unbind('hover');
				
				$( 'li > .menu-toggle', menu ).off('click').on('click', function(){
					
					var el = $(this).closest('li');
					
					if( el.hasClass( options.hoverClass ) ){
						
						el.removeClass( options.hoverClass )
						.children('ul').stop(true,true).fadeOut( options.delay );			
						
					} else {
						
						el.addClass( options.hoverClass )
						.children('ul').stop(true,true).fadeIn( options.delay );	
						
					}
					
				});
				
			}
			
		};
		

		$(window).bind( 'resize', doMenu );
		
		var __constructor = function(){
			init();
			doMenu();
		};
		
		__constructor();

	};

})(jQuery);

Я пытался изменять значение delay: 100, но всё безуспешно. Если весь этот код удалить, то меню перестает корректно работать, значит это тот файл, скорее всего. Может вы подскажете где его подредактировать?

[Юрий]

Евгений Сидаш, везде где fadeIn(). Можете ещё попробовать прописать display:block !important; вместе с предыдущими параметрами для класса меню.

Answer 2

[Adilet Zhuman]

Если у вас меню появляется с помощью css то для дочернего элемента:hover вешайте transition;
Если через javascript то, где вызывается дочерний элемент document.getElementById('Ваш элемент').style.transition = 'all .25s ease-in-out';

Comments

[Евгений Сидаш]

Я так понимаю, мне нужно найти сам файл JS в который необходимо вставить этот код.
Вроде как нашел его, но куда именно вставить эту инструкцию не знаю...

/**
 * MuffinMenu 
 * 
 * Horizontal Multilevel Menu with WP MegaMenu Support 
 * 
 * 3.0 | Muffin Group
 */

 (function( $ ){
 	"use strict";
 	
 	$.fn.mfnMenu = function( options ){

 		var menu = $(this);
 		
 		var defaults = {
 			addLast		: false,
 			arrows      : false,
 			delay       : 100,
 			hoverClass  : 'hover',
 			mobileInit	: 768,
 			responsive	: true
 		};
 		options = $.extend( defaults, options );
 		
 		
 		var init = function(){
 			
			// add '.submenu' class
			$( 'li:has(ul)', menu ).addClass( 'submenu' );
			
			// append mobile toggle button
			$( 'li:has(ul)', menu ).append( '<span class="menu-toggle"></span>' );
			
			// add '.mfn-megamenu-parent' class
			menu.children( 'li:has( ul.mfn-megamenu )' ).addClass( 'mfn-megamenu-parent' );	
			
			// add '.last-item' class
			$( '.submenu ul li:last-child', menu ).addClass( 'last-item' );
			
			// add '.last' class
			if( options.addLast ) {
				$( '> li:last-child', menu ).addClass( 'last' )
				.prev().addClass( 'last' );
			}
			
			// appand submenu arrows
			if( options.arrows ) {
				$( 'li ul li:has(ul) > a', menu ).append( '<i class="menu-arrow icon-right-open"></i>' );
			}

		};
		
		
		var doMenu = function(){

			if( ( window.innerWidth >= options.mobileInit ) || ( ! options.responsive ) ){
				
				// desktop --------------------------------

				$( '> li, ul:not(.mfn-megamenu) li', menu ).hover(function() {
					
					$(this).stop(true,true).addClass( options.hoverClass );
					
					$(this).children( 'ul' ).stop(true,true).fadeIn( options.delay );
					
				}, function(){
					
					$(this).stop(true,true).removeClass( options.hoverClass );
					
					$(this).children( 'ul' ).stop(true,true).fadeOut( options.delay );	
					
				});
				
			} else {

				// mobile ---------------------------------
				
				$( 'li', menu ).unbind('hover');
				
				$( 'li > .menu-toggle', menu ).off('click').on('click', function(){
					
					var el = $(this).closest('li');
					
					if( el.hasClass( options.hoverClass ) ){
						
						el.removeClass( options.hoverClass )
						.children('ul').stop(true,true).fadeOut( options.delay );			
						
					} else {
						
						el.addClass( options.hoverClass )
						.children('ul').stop(true,true).fadeIn( options.delay );	
						
					}
					
				});
				
			}
			
		};
		

		$(window).bind( 'resize', doMenu );
		
		var __constructor = function(){
			init();
			doMenu();
		};
		
		__constructor();

	};

})(jQuery);