Rozwijane menu - Jak schować liste przy zjechaniu kursorem?

Question

Witam. Mam na swojej stronie rozwijane menu (Po najechaniu na element w nav'ie, pod nim pokazuje się lista). Przy najechaniu działa ładnie, ale nie mam pojęcia jak zaimplementować znikanie listy gdy użytkownik zjedzie kursorem z listy. Najlepiej w jquery. Pozdrawiam.

Comments

Pokaż Twój kod, który rozwija menu po najechaniu myszą.

---

$(document).ready(function(){
	$('.nav-drop').mouseover(function(){
		$('.nav-drop').removeClass('item-active')
		$('.nav-dropdown').removeClass('nav-dropdown-active')
		$(this).toggleClass('item-active');
		var next = this.nextElementSibling;
		$(next).toggleClass('nav-dropdown-active');
	});
});

Mam takie listy rozwijane 3 w menu, dlatego w kodzie 3 i 4 linia usuwają najpierw wszystkie dotychczasowe "rozwijania" i potem zostaje nakładana klasa active na element this.

Answer 1

Skoro rozwijasz menu manipulując klasami CSS w callbacku do jQuery mouseover, to zwinąć menu możesz odwrotnymi manipulacjami w callbacku do metody jQuery mouseleave.

P.S. W razie problemów z triggerowaniem callbacka przy mouseover, rozważ zmianę na metodę mouseenter, która radzi sobie z bąbelkowaniem zdarzeń, dzięki czemu callback nie jest odpalany, gdy najedzie się myszą na elementy wewnątrz elementu do którego docelowo się podpiąłeś.

Comments

Możliwe też, że opędziłbyś zwijanie i rozwijanie jednym callbackiem (tzn. przekazaniem jednej referencji do funkcji do mouseleave i mouseover), a w środku zamienił użycie metody removeClass na toggleClass - przy założeniu, że nie będzie trzeba dokładać dodatkowej "ifologii", gdy sama funkcja w przyszłości będzie zawierać więcej kodu specyficznego dla danego stanu (rozwinięcia lub zwinięcia).

Answer 2

To można zrobić przez css. Tutaj są przykłady https://css-tricks.com/solved-with-css-dropdown-menus/ . 

Comments

Chodziło mi szczególnie o sposób w javascript, bo właśnie jego się uczę, ale dziękuję.