Joomla jquery vertikální menu

Úvodní strana \ Joomla \ Joomla \ 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 (10)

tak nasiel som mensi problem
menu pekne funguje ale nastal problem ze ked vlozim do index.php

tak sa mi prestane fungovat tento modul Photoslide GK3
neukazuje obr.. pre priklad
na stranke. k20.honda-racing.sk nefunguje Photoslide GK3 a na sranke ruman.sos-it.sk funguje.. lebo tam nemam ten skript
viete mi stym dako pomoct?

oki uz to mam chcem sa podakovat za pomoc.. uz si to len doladim este raz velmi pekne dakujem za pomoc

Jquery a menu.js mate spravne.

Jeste menu.js upravte takto

$(document).ready(function(){
//skryjeme vsechny submenu krome soucasneho
$(".leftcol ul.menu li:not(.active) ul").hide();

//pri kliku zobraz podmenu a skryj vsechny ostatni
$(".leftcol ul.menu li").click(function(){

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

});
});

Melo by to fungovat. CSS uz si pak musite upravit sam

dakujem na reakciu cize stranka je http://k20.honda-racing.sk/
chcel by som napr aby v lavom menu kde mam obchod bolo este teda submenu napr obchod1
len problem je ze tuto sablonu som ja nerobil a nemam az taku velku skusenost ..
vsetko som spravil podla navodu len tomuto som moc neporozumel ako to presne upravit
$("div#left ul.menu li:not(.active) ul").hide();
mozem poslat aj index. aj css ak by bolo treba

Tezko rict co vam nejde, poslete kdyztak uazku webu.

Je nutne upravi soubor templates/vase_sablona/index.php

mezi tagy

head

je nutne vlozit oba skripty. Nasledny kod pak vlozite do souboru ktery pojmenujete menu.js a vlozite ho do slozky templates/vase_sablona/js/

Jeste je nutne upravit selektory :

$("div#left ul.menu li:not(.active) ul").hide();

podle toho kde se vase menu nachazi

ahojte mam mensi problem stymto navodom pre moju sablonu nechce mi to menu fungovat lebo nechapem presne co to mam presne pozmenit pre svoju sablonu vedel by mi niekto stym pomoct? dakuuujem

Ano možné to je, ale nedoporučuji. Dělá to hrozný zmatek. Kod upravte takto:

$(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").hover(function(){

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

});
});

Zdravim, je mozne, aby se podpolozky zobrazily po najeti mysi, ne az po kliknuti? Diky za pripadnou reakci

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?