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       13 806×

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 Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý