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

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

jQuery - horizontální vysouvací navigace

Google       Google       27. 7. 2011       17 132×

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 Jak na push notifikace pro backend vývojáře

Jak na push notifikace pro backend vývojáře

Obě hlavní mobilní platformy, tedy Android i iOS, podporují posílání zpráv z backendu do mobilního zařízení formou push notifikace. V 99% případů se jedná o jedinou správnou cestu, jak aplikaci ze serveru poslat nějaká data - spolehlivé a rychlé push notifikace optimalizované na spotřebu baterie. Tento článek se věnuje pouze službě Firebase Cloud Messaging, která je vlastněná Googlem

Reklama
Reklama
Obrázek ke článku Předvídání extrémních výkyvů počasí v Evropě bude přesnější díky novému počítači Atos BullSequana

Předvídání extrémních výkyvů počasí v Evropě bude přesnější díky novému počítači Atos BullSequana

Předpověď na 15 dní dopředu s přesným rozlišením 10 km dokáže superpočítač zpracovat za méně než hodinu. Společnost Atos, světový lídr v oblasti digitální transformace, dodá Evropskému středisku pro střednědobé předpovědi počasí (ECMWF) nový superpočítač BullSequana XH2000, který je jedním z nejsilnějších meteorologických superpočítačů na světě. 

Obrázek ke článku 18+ věcí, které by měl dobrý iOS vývojář zvládat

18+ věcí, které by měl dobrý iOS vývojář zvládat

Začátky jsou vždy v každém oboru nejtěžší a hodně času zabere se vůbec v tématu zorientovat. Jinak tomu není i pří vývoji na iOS zařízení. Proto jsme vytvořili článek pro ty, kteří své znalosti teprve budují. Tento krátký dokument shrnuje, co potřebuje každý iOSák znát.

Obrázek ke článku V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

Už na konci měsíce může zůstat část Čechů bez televizního signálu. Vypínání stávající sítě začne již 27. listopadu v Praze a středních Čechách a do poloviny roku 2020 čeká přechod na nový standard pozemního digitálního televizního vysílání DVB-T2 celou republiku. K naladění nového televizního vysílání musí řada lidí nakoupit modernější zařízení, upravit antény nebo přejít na kabelové či internetové vysílání. 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý