Показать сообщение отдельно
  #1 (permalink)  
Старый 05.09.2017, 10:30
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 72

Правильное адаптивное меню
Здравствуйте подскажите пожалуйста. Мне уже ранее помогли на этом форуме с адаптивным меню, но оно не совсем правильно работает, вот код меню:
$('.menu__list').on('mouseleave mouseenter click', function (e) {
    if( e.relatedTarget === null && e.type !== 'click' ) return;
    $('.middleMenu__drop').slideToggle(100);
});

<ul class="wrap middleMenu">
<li class="menu__list first"><a>Каталог</a>
	<ul class="middleMenu__drop" style="display: block;">
		<li><a href="#">Туфли</a></li>
		<li><a href="#">Босоножки</a></li>
		<li><a href="#">Кеды</a></li>
		<li><a href="#">Кросcовки</a></li>
		<li><a href="#">Ботинки демисезон</a></li>
		<li><a href="#">Сапоги демисезон</a></li>
	</ul>
</li>
<li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
<li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
<li class="last"><a href="#">НОВИНКИ</a></li>
</ul>

Но это меню выходит дерганым, если мышкой наводить и уводить, его можно сломать и заставить работать наоборот, так же как если при обновлении страницы курсор мышки навести на меню и заставить его выпасть.
Хотелось бы правильно реализовать меню вероятно это нужно делать через slideDown и slideUp, я нашел вот такой кусок когда:
$(document).ready(function () {
 
  $('.vert-nav li').hover(
    function() {
      $('ul', this).slideDown(110);
    },
    function() {
      $('ul', this).slideUp(110);
    }
  );
 
});

Но тут при неведение только работает, я так понимаю что неправильно вызывать для каждого события одну и туже функцию, хотелось бы передать список событий через .on, то в примере с .hover в качестве параметров передано две функции slideDown и slideUp, в .on не получается просто передать две функции после перечня событий, подскажите как правильно реализовать данный момент?
Ответить с цитированием