Menu reagujicí na kliknutí

Požadavky

  1. Rozbalení/sbalení při kliknutí na položku,
  2. sbalení při kliknutí někam mimo.

Postup řešení

Základ je jednoduché prohazování třídy. S tím, že rozbalovaná část je absolutně posicovaná.

Celé to komplikuje až vypínání menu při kliknutí mimo.

  1. Vytvoří se funkce pro schování libovolné položky z #menu (odstraní případnou třídu, která submenu zviditelňuje),
    function closeAll() {
    	var items = document.getElementById("menu").getElementsByTagName("li");
    	for (var i = items.length - 1; i >= 0; i--) {
    		items[i].className = "";
    	};
    }
  2. ta se zavolá při kliknutí někam do stránky.
    document.documentElement.onclick = closeAll;

„Probublávání“

Bohužel při kliknutí na položku, která rozkrývá podseznam, událost probublá i na documentElement, takže se submenu vzápětí ihned skryje.

Řešení je vypnutí této vlastnosti. Ve starších Explorerech funguje jen:

event.cancelBubble = true;

Ve všech novějších prohlížečích potom:

event.stopPropagation();

Aby to nebylo tak jednoduché, Firefox (Gecko) potřebuje na rozdíl od ostatních prohlížečů event předat do funkce.

<a onclick="funkce(event)" href="#">Rozbalit</a>

Kód sjednocující chování napříč prohlížeči proto značně nabobtná.

function nazevFunkce(e) {
	e.cancelBubble = true; // vypnutí pro starší Explorery
	if (e.stopPropagation) e.stopPropagation(); // vypnutí pro ostatní
    // vlastní kód funkce
}

Výhoda potom je, že máme kód funkční ve všech prohlížečích (minimálně od IE 6).

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zvýraznění podle rolování

Označení odkazu na kotvu, pokud je na ní odrolováno

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

Fixní menu při scrollování

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Komentáře