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       16 997×

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 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í. 

Reklama
Reklama
Obrázek ke článku Zavádění Master Data Management v praxi

Zavádění Master Data Management v praxi

Předchozím článku jsme si vysvětlili, co jsou to Master Data, kdy je firma obvykle začíná řešit, v jakých krocích postupovat a jak nám může pomoci zvláštní nástroj pro evidenci Master dat. V tomto článku se podíváme na dvou příkladech, jak prakticky začít Master data řešit.

1. Nová Master Data, která potřebujeme někde spravovat
2. Zmapování existujících Master dat a určení jejich vlastníků

Obrázek ke článku 5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

Myslíte si, že máte skvělý nápad na byznys apku a znáte všechno, co potřebujete? Možná vám vývoj software na míru rozmluví Vláďa Skoumal, z firmy studio SKOUMAL vyvijející mobilní aplikace 5.11. 2019 v 18:00 v Impact Hub Praha nebo tento jeho článek.


 

Obrázek ke článku Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Celkem 66 % uživatelů zajímá rozšířená realita v oblasti gamingu. Mezi nimi je i 35 % těch, kteří jinak hry nehrají.
Pro téměř 50 % respondentů by bylo zajímavé zapojení virtuální objektů do reálného světa. Objekty by zůstaly tam, kde je při hře „umístili“.
Až 43 % uživatelů láká využití rozšířené reality ve sportu

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