Joomla jquery vertikální menu

Odkazy

Spřátelené weby

JoomlaDev.eu - Vše o vývoji CMS Joomla

Redakční systém WordPress - Nejlepší redakční systém zdarma - WordPress

Anketa

O jakém RS by jste chtěli více článků

	Joomla
	Drupal
	Wordpress
	Prestashop
	Zencart

Navigace: Úvodní strana

Joomla

Články

Joomla jquery vertikální menu

Neděle, 11 Říjen 2009 19:02

Dnes si ukážeme jak vytvořit poměrně efektní vertikální menu v Joomle. Využijeme k tomu javascriptovou jQuery knihovnu, která nám hodně usnadňuje práci hlavně při použití různých hejbátek a dropable objektech, ale i s ajaxem. Nejprve jak tedy na to. Máme dvě možnosti. Buďto chceme aby sekce a kategorie byly klikatelné. To znamená, že po kliknutí na odkaz sekce se otevře stránka se seznamem článků v kategorii. Otevření menu se provádí například kliknutím mimo odkaz. Přesně takto to máme uděláno zde na redakcni-systemy.com, a každý si může zobrazit zdrojový kód, proto si podrobněji rozebereme druhou možnost. Po kliknutí na název sekce, se nic nestane, jen se rozbalí seznam podkategorií, nebo článků v dané sekci. Záleží jaké menu si vytvoříme. Jdeme tedy na to.

Menu v Joomle

Nejprve si tedy vytvoříme menu v Joomle tak jak potřebujeme. Jak jsme si řekli po kliknutí na odkaz se nemá nic stát jak to ale v Joomle uděláme. Něco jako položka "nic nedělej" tam není máme dvě možnosti: Buďto jako typ menu zvolíme externí link a do položky Link vypíšeme javascript: void(0); nebo druhá možnost zakázání kliku uděláme přes jQuery a událost preventDefault(). Její podrobnější popis najdete na googlu. V tuto chvíli bohužel odkaz ma oficiální manuál nefunguje, proto se link nebudu vkládat. My si ukážeme jak to udělat pomocí první možnosti. Všechy položky která mají pod sebou podpoložky musí být tedy typu Externí odkaz a Link musí být void(0). Až úplně poslední v hierarchii musí být klasický odkaz vedoucí na kategorii, článek, sekci. Kam povede to už je na vás. Na obrázku dole vidíme jak může menu vypadat pro náš ukázkový příklad:

Pokud máme vytvořeno půjdeme dál. Nejprve si ale ukažme výsledek ať víme o co jde.
UKÁZKA: http://www.redakcni-systemy.com/media/jquerymenu/menu-jquery.html

Takhle bude vypadat výsledek, tedy po funkční stránce o kaskádových stylech samozřejmě hovořit nebudeme, menu si snad každý při čtení tohoto článku nastylovat umí. Nyní již máme menu vytvořené nyní ho v modulech umístíme někam do stránky a když už jsme v těch modulech musíme zaškrtnout položku "Always show sub-items" neboli "Vždy ukaž podpoložky". Toto je velmi důležité a nesmíme na to zapomenout.

Úprava šablony

Nyní by to již mělo být ze strany administrace Joomly všechno. Nyní musíme stáhnout jQuery balíček a vložit do šablony. Stáhneme si jQuery balíček nejlepší je minimální verze a umístíme ho do složky templates/vas_template/js/. Pokud máme hotovo musíme cestu ke skriptu vložit i do šablony otevřeme si tedy soubor index.php vaší šablony a vložíme do něj tyto dva řádky. Samozřejmě balíček s jQuery musíme přejmenovat na jquery.js

<script language="javascript" type="text/javascript" src="/templates/vase_sablona/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/templates/vase_sablona/js/menu.js"></script>

Soubor menu.js si tam vložíme již do foroty, jeho popis si ukážeme až za chvilku. Vlastně již nyní, je to totiž poslední věc která nám zbývá.

JQuery kód

Vytvoříme se například v souboru PSPad nebo i v poznámkovém bloku a vložíme do něj tento kód samozřejmě s drobnými úpravami vzhledem k vaší šabloně, o tom později:

$(document).ready(function(){
 //skryjeme vsechny submenu krome soucasneho
 $("div#left ul.menu li:not(.active) ul").hide();
 
 //pri kliku zobraz podmenu a skryj vsechny ostatni
 $("div#left ul.menu li").click(function(){
 
 var $polozky=$(this).siblings('.parent').children('ul').hide("slow");
 $(this).children().show("slow");
 
 });
 });

Teď si kód vysvětlíme. Funkcí ready říkáme ať se kód spustí až při úplném načtení stránky. Nejprve skryjeme všechny podpoložky. Abychom jquery menu odlišili od ostatních menu na stránce museli jsme použít selectoru: div#left ul.menu li:not(.active) ul ten říká vyber menu pouze v divu s id left, čili zřejmě menu v levém sloupci, toto menu musí mít třídu menu. Poslední věc je, že mu říkáme ať neschovává menu, které je právě aktivní (bylo kliknuto na podkategorii). Tyto selectory si samozřejmě musíte upravit podle šablony. Pokud například chcete takto zobrazovat všechny menu v pravém sloupci které je v divu <div class="pravy"> zvolíme selektor: div.pravy ul li:not(.active) ul je to jednoduché že? Další řádek už nám říká jakou funkci máme provést po kliku na náš prvek, v tomto případě odkaz. Má skrýt všechny příbuzné položky položce na kterou bylo právě kliknuto a zároveň má zobrazi podřazené položky (podkategorie) kliknuté položky. No a to je vše. Nyní si soubor uložíme jako menu.js a vložíme na ftp do složky templates/vase_sablona/js/

Tím by jsme měli být hotovy. Nezapomínejte prosím, že selektory si musíte změnit podle vaší šablony a nezapomeňte použít oficiální dokumentaci v případě problémů. Myslím ale, že příklad je dostatečně jasný. V případě nejasností se ptejte.

Komentáře (2)

Jak myslite neskryvali? Aby se jen rozbalovali ale pri kliknuti na dalsi polozku ta predchozi zustala otevrena?

Pokud myslite toto tak z kodu staci vyndat tento radek:

var $polozky=$(this).siblings('.parent').children('ul').hide("slow");

Zdravim, jak udelam aby se mi podpolozky neskryvali, kdyz kliknu na jednu z nich?