jQuery - horizontální vysouvací navigace
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

jQuery - horizontální vysouvací navigacejQuery - horizontální vysouvací navigace

 

jQuery - horizontální vysouvací navigace

Google       Google       27. 7. 2011       14 161×

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.

Reklama
Reklama

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:

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
14 hlasů
Google
(fotka) Tomáš BobekAutor je designérem stránek (2D grafika), ovládá jazyky HTML, CSS, PHP, JavaScript a zajímá se o programování v Javě.Krom programujte.com se podílí na projektech maths.cz (jako redaktor a grafik), ceskewebstudio.cz (jako designér) a webber.cz (jako JavaScript scriptař). Ostatní volný čas rád tráví s přáteli nebo sportuje (tenis, nohejbal, hokejbal, závodně fotbal).
Web     Twitter     Facebook    

Nové články

Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Reklama
Reklama
Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý