Tvorba horizontální vysouvací navigace s pěknými slajdovacími efekty za použítí JavaScriptového frameworku jQuery. V návodu si projdeme vytvoření jednoduché navigace a postupně jí přidáme ještě další dvě funkce.

Než začnu něco psát, ukáži vám, k čemu bychom se měli ve výsledku dobrat.

Začneme vytvořením sady položek, které budou umístěny na pravou stranu elementu, jenž je obsahuje. Po kliknutí na položku se vysune sada odkazů spadající pod rozkliknutou položku. Po druhém kliknutí (na již vysunutou položku) se celá sada opět skryje, vše s animacemi.

CSS styl

Pro zobrazení položek navigace je použitý jednoduchý seznam vložený do <div class="tab-nav">. CSS pro jednotlivé prvky navigace bude vypadat následovně:

.tab-nav ul {
  position: relative;
  float: left;
  width: 1600px;
  margin-left: 535px;
  padding-left: 0;
  list-style-type: none;
  background-color: #fff;
}
.tab-nav li {
  float: left;
  clear: left;
}
 
.tab-nav a {
  display: block;
  width: 74px;
  border-right: 1px solid #ddd;
  height: 25px;
  line-height: 24px;
  float: left;
  text-align: center;
  text-decoration: none;
  color: #000;
  background:  url(tab-slide.png) no-repeat 0 0; /* ikona šipky */
}
.tab-nav a.expanded {
  background-position: 0 30px; /* otočení ikony šipky */
}
/* pár úprav pro submenu */
.tab-nav ul ul {
  float: left;
  background-color: #333;
  width: auto;
  margin-left: 0;
}
.tab-nav li li {clear: none;}
.tab-nav li li a { color: #fff; width: 100px; background-image: 

none;}

Většina použitých CSS vlastností má co dočinění s pozicováním položek navigace. Hlavnímu tagu <ul> byl přiřazen levý margin o 75 px menší, než je celková šířka divu, v němž je uložen, čímž docílíme jeho zarovnání vpravo. Nastavení šířky tagu <ul> na 1600 px zajistí dostatek prostoru pro vedle sebe zarovnaný seznam odkazů jemu náležících.

Nastavení overflow u divu je velmi důležité. Skrývá totiž prvky, které by už přečnívaly na pravou stranu. Poznámka: ikonu šipky si vyberte jakoukoliv svoji a vneste ji do CSS (místa jsou okomentována).

HTML kód

Zde myslím není co vysvětlovat. Jedná se o velmi jednoduchou strukturu. Níže vidíte, jak vypadá.

<div id="tab-nav-1" class="tab-nav">
  <ul>
    <li>
      <a href="#">položka 1</a>
      <ul>
        <li><a href="#">položka 1.1</a></li>
        <li><a href="#">položka 1.2</a></li>
        <li><a href="#">položka 1.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">položka 2</a>
      <ul>
        <li><a href="#">položka 2.1</a></li>
        <li><a href="#">položka 2.2</a></li>
        <li><a href="#">položka 2.3</a></li>
        <li><a href="#">položka 2.4</a></li>
        <li><a href="#">položka 2.5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">položka 3</a>
      <ul>
        <li><a href="#">položka 3.1</a></li>
        <li><a href="#">položka 3.2</a></li>
        <li><a href="#">položka 3.3</a></li>
      </ul>
    </li>
  </ul>
</div>

Vysouvání

Nyní navigace vypadá tak, jak jsme chtěli, takže je na čase ji trochu oživit. Začneme s jednoduchým nastavením, aby se každá položka po kliknutí vysunula vlevo a tak ukázala odkazy, které skrývá. Dále aby se po druhém kliknutí srolovala napravo, čímž odkazy opět skryje.

Toto základní chování může být nastaveno v jedné události click, jež bude ovládat hlavní položky navigace. Nejdříve musíme vytvořit sadu proměnných. Proměnná $parentItem je hlavní <li> položka, v níž je uložen odkaz, na který se kliklo. Druhá proměnná slideAmt je šířka vloženého <ul>, který je stejně jako položka, na kterou bylo klinuto, uvnitř hlavního tagu <li>. Poslední proměnná direction už jenom udává, zda se hlavní <li> bude pohybovat směrem vpravo, nebo vlevo.

var $topLinks1 = $('#tab-nav-1 > ul > li > a');
$topLinks1.click(function() {
  var $parentItem = $(this).parent(),
      slideAmt = $(this).next().width(),
      direction;
  // kód bude pokračovat
});

Uvnitř události click odkazuje klíčové slovo this na DOM element, na který bylo kliknuto. Vložením slovathis do $() můžeme na tento element volat metody jQuery.

Pro získání posuvného pohybu můžeme buď upravovat CSS vlastnost left, nebo vlastnost margin-left. V tomto příkladě budeme upravovat margin-left, takže dalším krokem bude zjištění směru animace na základě aktuální hodnoty margin-left. Pokud je menší než 0, tak je proměnná direction nastavená na +=, což bude margin zvyšovat (zpět na 0). V tom druhém případě bude proměnná direction nastavena na -=. Ve stejném čase bude přepnuta třída expanded, což zaručí změnu směru šipky.

var $topLinks1 = $('#tab-nav-1 > ul > li > a');
$topLinks1.click(function() {
  var $parentItem = $(this).parent(),
      slideAmt = $(this).next().width(),
      direction;
 
  if (parseInt($parentItem.css('marginLeft'), 10) <0) {
    direction = '+=';
    $(this).removeClass('expanded');
  } else {
    $(this).addClass('expanded');
    direction = '-=';
  }
  // kód bude pokračovat
});

Nyní se konečně dostáváme k vytvoření samotné animace za použití proměnných direction a slideAmt. Tady je výsledná implemetace animace (byla použita metoda .animate):

var $topLinks1 = $('#tab-nav-1 > ul > li > a');
  $topLinks1.click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;
 
    if (parseInt($parentItem.css('marginLeft'), 10) <0) {
      direction = '+=';
      $(this).removeClass('expanded');
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
   
    $parentItem
      .animate({marginLeft: direction + slideAmt}, 400);
    return false;
  });

Vyzkoušejte si výsledek sami:

Zobrazení pouze jedné položky

Toto řešení je už použitelné, ale ještě si ho malinko vylepšíme. Zařídíme, aby byla vždy zobrazena pouze jedna řada odkazů. Máme-li tedy již nějakou řadu rozkliklou, pak se při kliknutí na jinou položku tato řada zasune a ve stejný čas se vysune ta, kterou jsme právě zvolili. Pro toto chování bude kód potřebovat pár menších úprav.

$(document).ready(function() {
  var $topLinks1 = $('#tab-nav-1 > ul > li > a');
  $topLinks1.click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;
    $topLinks1.removeClass('expanded');
    if (parseInt($parentItem.css('marginLeft'), 10) <0) {
      direction = '+=';
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
   
    $parentItem
      .animate({marginLeft: direction + slideAmt}, 400)
        .siblings()
        .animate({marginLeft: '0'}, 150);
    return false;
  });
});

Nyní jsou všechny odkazy uložené do jedné proměnné, takže kdykoliv se na nějaký klikne, všem ostatním bude odstraněna třída expanded.

Podobná kontrola je použita na zjištění směru, kterým se bude prvek animovat. Pokud bude směr animace u <li>, v němž leží odkaz, na který jsme klikli, doleva, pak se tomuto odkazu také přiřadí třída expanded.

Konečně je tedy rozkliklá řada animovaná ve správném směru a o správný počet pixelů. V tomto řešení je ovšem také kapka neprofesionality, neboť se vždy animují všchny seznamy, aniž bychom zjišťovali, zda je pro ně v dané situaci animace opravdu nutná.

Zde je demo navigace, která dovoluje mít rozbalenou pouze jednu kategorii:

Automatické zasunutí

Nyní vše funguje tak, jak má, ale pro dokonalost přidáme ještě jednu užitečnou funkci. Pokud je rozbalená nějaká řada odkazů a uživatel opustí kurzorem myši div, v němž je navigace uložena, na delší dobu než jedna sekunda, pak se celá navigace automaticky sroluje do původní podoby.

$(document).ready(function() {
  var closeAll,
      $topLinks3 = $('#tab-nav-3 > ul > li > a');
 
  $('#tab-nav-3 ul ul').css('opacity', '0.5');
  $topLinks3.click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;
    $topLinks3.removeClass('expanded');
    if (parseInt($parentItem.css('marginLeft'), 10) <0) {
      direction = '+=';
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
    $parentItem
      .animate({marginLeft: direction + slideAmt}, 400)
        .siblings()
        .animate({marginLeft: '0'}, 150);
    return false;
  });
 
  $('#tab-nav-3')
  .mouseleave(function() {
    closeAll = setTimeout(function() {
      $topLinks3.removeClass('expanded')
        .parent().animate({marginLeft: '0'}, 150);
    }, 1000);
 
  })
  .mouseenter(function() {
    clearTimeout(closeAll);
  })
 
});

Na řádku 2 je deklarována proměnná, která bude použita v setTimeout(), což můžete vidět uvnitř události (metody) .mouseleave. Funkce setTimeout() má dva argumenty: první je funkce s kódem, který s animací sroluje položky navigace, a druhý je čas (v milisekundách), po jakém bude první argument vykonán. Funkce clearTimeout() uvnitř události (metody) .mouseenter() zruší odpočítávání, pokud se uživatel v rámci oné jedné sekundy vrátil kurzorem zpět na div s navigací.

Poznámka: metody .mouseenter(fn) a .mouseleave(fn) jsou k dispozici až v jQuery verze 1.3. Pokud používáte starší verzi (1.2.6), můžete použít .bind('mouseleave',fn) a .bind('mouseenter',fn) nebo v jakékoliv verzi také .hover(fn,fn).

A nakonec ještě finální ukázka: