Interaktívne menu v JavaScripte s jQuery

Dnes si ukážeme ako vytvoriť jednoduché interaktívne menu s radom efektov ako napríklad schovávanie / zobrazenie po scroll. Ako vždy si najskôr vytvoríme HTML, CSS a JS súbor, do ktorých pridáme nasledujúci kód.

JS **

$(function(){

  ... kód ...

});

Html

<div id="menu">
   <nav>
      <ul>
         <li class="item">
            <a href="#1">Jedi</a>
            <ul>
               <li><a href="#1-1">Yoda</a></li>
               <li><a href="#1-2">Luke Skywalker</a></li>
               <li><a href="#1-3">Mace Windu</a></li>
               <li><a href="#1-4">Obi-Wan Kenoby</a></li>
            </ul>
         </li>
         <li class="item">
            <a href="#2">Sith</a>
            <ul>
               <li><a href="#2-1">Darth Sidious</a></li>
               <li><a href="#2-2">Darth Maul</a></li>
               <li><a href="#2-3">Darth Bane</a></li>
               <li><a href="#2-4">Darth Tyranus</a></li>
               <li><a href="#2-5">Darth Vader</a></li>
            </ul>
         </li>
         <li class="item">
            <a href="#3">LOTR</a>
            <ul>
               <li><a href="#3-1">Aragorn</a></li>
               <li><a href="#3-2">Gandalf</a></li>
               <li><a href="#3-3">Legolas</a></li>
               <li><a href="#3-4">Sauron</a></li>
            </ul>
         </li>
         <li class="item">
            <a href="#4">HP</a>
            <ul>
               <li><a href="#4-1">Harry Potter</a></li>
               <li><a href="#4-2">Ronald Weasley</a></li>
               <li><a href="#4-3">Hermione Granger</a></li>
               <li><a href="#4-4">Albus Dumbledore</a></li>
               <li><a href="#4-5">Tom Marvolo Riddle</a></li>
            </ul>
         </li>
      </ul>
   </nav>
   <div id="subnav" class="active">
   </div>
</div>


<!-- zbytek stránky -->

CSS

/*** menu ***/

#menu
{
   width: 100%;
   height: 50px;
   position: fixed;
   top: 0;
   left: 0;
}

nav
{
   width: 100%;
   height: 50px;
   background: #fff;
   margin: 0px auto;
   border-bottom: 1px solid #ddd;
   z-index: 100;
   position: relative;
}

/* 1 */

nav ul, #subnav ul
{
   float:left;
   position:relative;
   left:50%;
}

nav ul li, #subnav ul li
{
   float:left;
   position:relative;
   right:50%;
}

nav ul li a
{
   padding: 0px 15px;
   color: #575757;
   display: block;
   font-size: 22px;
   line-height: 50px;
}

nav ul li:hover, nav > ul > li.active
{
   border-bottom: 1px solid #dc1041;
}

/* 2 */

nav > ul > li > ul
{
   display: none;
}

#subnav
{
   width: 100%;
   height: 40px;
   background: #fff;
   border-bottom: 1px solid #ddd;
   top: -41px;
   position: relative;
   z-index: 50;
}

#subnav.active
{
   top: 0;
}

#subnav ul li:hover
{
   border-bottom: 1px solid #dc1041;
}

#subnav ul li a
{
   padding: 0px 15px;
   color: #979797;
   display: block;
   font-size: 15px;
   line-height: 40px;
}

Tak, už máme nastylované celé menu. Bez nášho JS kódu, alebo s vypnutým JS, by sa nám ale zobrazili obe dve úrovne a to my predsa nechceme. Druhou úroveň menu - #subnav - vyplňujeme až v JS, teda ho musíme dať preč. To docielime pripísaním CSS vlastnosti display: none; do #subnav.

Nezabudnite si tiež do hlavičky pridať jQuery a jQuery UI.

Efekty

Zobrazenie 2. úrovne

Ako prvý efekt bude zobrazenie 2. úrovne menu. To docielime nabehnutím alebo klikom na položku v 1. úrovni menu. Aktívna položka bude mať vždy upravený štýl, ktorý obsahuje trieda .active.

teda:

$(".item").on("click mouseover", function(){

   ... kód ...

});

Zo všetkého najskôr musíme odstrániť triedu .active z už aktívnej položky. Toho dosiahneme jednoducho tak, že odstránime z elementov, ktoré nám vyberie selektor $ ( '. Item'), triedu .active.

$(".item").removeClass("active");

Následne na položku, na ktorú sme klikli, pridáme triedu .active. Tu využijeme kľúčového slova this, ktoré použijeme ako selektor.

$(this).addClass("active");

Zmena triedy položky nám už funguje a teraz musíme vkladať 2. úroveň menu do našej #subnav. Tu využijeme funkcie .html (), ktoré odovzdáme klon 2. úrovne menu.

$("#subnav").html( $(this).find("ul").clone(true) );

Teraz ešte nemáme viditeľný výsledok. Musíme #submenu zobraziť a kliknúť na prvú položku menu. Vytvoríme si teda pomocnú funkciu init (), ktorú budeme volať nakonci kódu.

var init = function(){
    $("nav > ul > li:nth-of-type(1)").click();
    $("#subnav").css('display', 'block');
}

Teraz už vidíme menu tak ako máme.

Skrytie / zobrazenie menu

Teraz chceme po každom pohybe kolieskom myši skryť či zobraziť menu. V CSS kódu máme # subnav.active, čo nám skryje menu (nastaví top: 0;).

Najskôr potrebujeme nabindovať pri pohybe kolieskom nejakú funkciu, ktorú si pomenujeme treba koliesko ().

$("body").bind("mousewheel DOMMouseScroll", kolecko);

Vo funkcii koliesko () bude následne kód, ktorý zistí akým smerom sme sa posunuli a skryje / zobrazí menu.

var kolecko = function(e){
   e = e.originalEvent;
   var delta = e.wheelDelta>0||e.detail<0?1:-1;
   $("#subnav").toggleClass('active', delta === 1, 250);
}

Prvé 2 riadky kódu nám zistí akým smerom sme sa pohli. Kód som našiel niekde na internete a mal by fungovať v každom prehliadači. Delta 1 je hore, -1 ich dole.

Posledný riadok je podmienená zmena triedy, ktorá nám mení pozíciu menu vďaka zmene triedy.

Môžete si vyskúšať, že sa nám naozaj menu skrýva a zobrazuje s pomerne pekným efektom.

Na začiatok stránky

Teraz si urobíme efekt, kedy nám po kliknutí na menu (iba na prvú úroveň) vyjde stránka úplne hore.

Vytvorme si funkciu vyjedNahoru (), kam vložíme animáciu pre pohyb stránky a tiež pekný efekt, ktorý nám skryje menu. Stránka sa presunie a menu nám zase zobrazí.

var vyjedNahoru = function(){
   $("html, body").stop().animate(
      { scrollTop: 0 },
      1000, "easeInOutExpo"
   );

   $("#subnav").stop(true, true).removeClass('active', 400).delay(600).addClass("active", 300);
   }

Dobre, ale kde zavoláme túto funkciu? No predsa po kliku na #menu.

$("#menu").on("click", function(){
   vyjedNahoru();
});

No, efekt nám funguje, avšak vykoná sa kedykoľvek klikneme na #menu. To je celkom nepríjemné. V skutočnosti sa práve naším klikom klikne na všetky elementy, ktoré sa nachádzajú pod kurzorom. Teda ak klikneme na položku, tak klikneme na a, ak, ul a na nav až na naše #menu, kde vykoná efekt.

Ukážme si ako sa tomu dá zabrániť. Použijeme e.stopPropagation ();, Ktorý nám zastaví propagáciu, teda nám zakáže akékoľvek iné situácie kľučku okrem tej, ktoré sú priamo na daný element. Tento kód aplikujeme na #menu chcete a #subnav.

$("#menu li, #subnav").on("click", function(e){
   e.stopPropagation();
});

Klávesové skratky

Pridáme tiež pár klávesových skratiek, aby sme mohli menu ovládať aj z klávesnice.

Na to použijeme túto jednoduchú funkciu.

$(document).keydown(function(e) {

   switch(e.which || e.keyCode)
   {
       ... kód ...
   }
});

Po stlačení klávesy X by sa nám menu malo zatvoriť alebo otvoriť a po stistu klávesy T by malo vyjsť hore. Klávesa X má číslo 88 a T má číslo 84. Upravme náš switch:

case 88:
   $("#subnav").stop(true,true).toggleClass('active', 250);
break;
case 84:
   vyjedNahoru();
break;

Na záver ešte zamedzíme vypisovanie odkazu do url pomocou e.preventDefault (), ktorý použijeme na #menu li, #subnav li.

$("#menu li, #subnav li").on("click", function(e){
   e.preventDefault();
});

Menu máme hotové