I have stopped developing joomla extensions because of my other works, but I won't turn off the site as long as possible so feel free download my Joomla 1.5 extensions. :)

I am on a freedom
Home Joomla tippek | My Joomla tips Joomla menü rövid leírással

Joomla menü rövid leírással

Nyomtatás E-mail
(9 szavazat)
Joomla - Tutorial
Írta: Manó - 2010. március 17. szerda, 18:54

Joomla menü rövid leírássalEgyre gyakrabban találkozni olyan menü megoldásokkal, ahol a menüpont két sorból áll. Első sor maga a menüpont neve, a második sor pedig egy rövid "leírás", általában kisebb betűmérettel. A leírásban bemutatom, hogyan lehet pár lépésben átalakítani az eredeti menünket szép két soros / rövid leírásos menüre.


1., Menüpontok megadása

A menükezelőben a menüpontokat az alábbi módon kell bevinni:

MENÜNEVE | MENÜ LEÍRÁSA

A módosításainkkal pedig rávesszük a menü modult, hogy a | jelet tekintse elválasztónak, és alakítsa át a megfelelő formára. (azaz span tagok közé tegye mindkét részt.)


2., Modul (mod_mainmenu) módosítása (hack)

A \modules\mod_mainmenu\helper.php (~290.sor) kódrészletét kell módosítanunk erről:

// Menu Link is a special type that is a link to another item
 if ($item->type == 'menulink')
 {
 $menu = &JSite::getMenu();
 if ($newItem = $menu->getItem($item->query['Itemid'])) {
 $tmp = clone($newItem);
 $tmp->name     = '<span><![CDATA['.$item->name.']]></span>';
 $tmp->mid     = $item->id;
 $tmp->parent = $item->parent;
 } else {
 return false;
 }
 } else {
 $tmp = clone($item);
 $tmp->name = '<span><![CDATA['.$item->name.']]></span>';
 }

erre (csak az else részben van változás):

// Menu Link is a special type that is a link to another item
 if ($item->type == 'menulink')
 {
 $menu = &JSite::getMenu();
 if ($newItem = $menu->getItem($item->query['Itemid'])) {
 $tmp = clone($newItem);
 $tmp->name     = '<span><![CDATA['.$item->name.']]></span>';
 $tmp->mid     = $item->id;
 $tmp->parent = $item->parent;
 } else {
 return false;
 }
 } else {
 $tmp = clone($item);
 $titlehack = explode("|",$item->name);

 if (isset($titlehack[1])) {
 $tmp->name = '<span><![CDATA['.$titlehack[0].']]></span><span class="desc"><![CDATA['.$titlehack[1].']]></span>';
 }
 else {
 $tmp->name = '<span><![CDATA['.$titlehack[0].']]></span>';
 }

 }

3., CSS kiegészítése

Annak érdekében, hogy a menü neve és annak leírása egymás alá kerüljön, egy kis kiegészítést kell beírnunk a sablonunk stílusáért felelős css állományába.

 
div.module_menu ul li a span.desc{
display:block;
font-style:italic;
color:#888888;
font-size:10px;
}

Ez a példa rounded modulstílus és "_menu" modul css utótag beállítása esetén működik.

(Előfordulhat, hogy a div.moduletable ul li a span.desc szükséges egyes sablonoknál, de ez sablon- és beállításfüggő, szóval meg kell nézni az oldal forrását, és annak megfelelően beállítani a span.desc-et)


Tulajdonképpen ennyi az egész! Ha mindent jól csináltunk akkor a fenti képen is látható eredményt kell kapjuk.


4., Finomítás, azaz a Breadcump / Útkövetés modul

A breadcrumbs modul a menüpontnál megadott (névvel és leírással) fogja kiírni az útvonalat. Ha ez zavar minket, és nincs szükségünk a menüpont leírásra, akkor az alábbi módosítást kell elvégezni.

MVC-nek köszönhetően nem kell az alap állományokat módosítani, hanem csak a

\modules\mod_breadcrumbs\tmpl\default.php állományt másoljuk meg

\templates\TE_SABLONOD\html\mod_breadcrumbs\default.php -ként és  módosítsuk ezt:

<span>
<?php for ($i = 0; $i < $count; $i ++) :

erre:

<span>
<?php for ($i = 0; $i < $count; $i ++) :

 $namehack = explode("|",$list[$i]->name);
 $name = $namehack[0];

Majd a kód többi/lentebbi részében cseréljük le mindenhol ezt:

$list[$i]->name

erre:

$name


Ezek után az útkövetés modulunk úgy fog kinézni, mint a menü módosítás előtt.


Alternatívák:

Persze van akinek ez nem elég, és akár modulok is lenyílnak 1-1 menüpontnál, ilyen például a JoomlArt-os sablonokban a megamenu, ami tényleg elég jól tud kinézni. Ja Purity II ingyenes sablonban ki is lehet próbálni. (megamenu-t kell választani)

A napokban megjelent a Maxi Menu CK modul, amelyben szintén be lehet állítani 2 soros menüpontokat, sőt még modulokat is. Hátránya, hogy lényegesen kevesebb opcióval rendelkezik, mint a Joomla alap menü modulja. Esetemben szükség volt/van néhány ilyen  opcióra (pl modul paramétereinél "Első szint"/Utolsó szint"), ezért én nem tudtam használni ezt a modult, maradtam a hack-nél.


Mivel a Joomla alap állományait is kell módosítani, ezért verziófrissítéskor felülíródhatnak változtatásaink!

 

Hozzászólások  

 
0 #6 2012-03-15 18:25
Szia Manó!

Köszi a gyors segítséget. Remekül működik, sikerült nekem is az átalakítás.

Még egyszer köszi a hasznos cikkeket.
Idézet
 
 
0 #5 Manó 2012-03-13 11:53
Szia,
Természetesen lehet. A példakódból hiányzott, most pótoltam ("desc").
üdv
Manó
Idézet
 
 
0 #4 2012-03-11 11:22
Szia!

Megoldható-e az, hogy a leírásnak osztály alapú kiválasztót (class) adjunk?
Idézet
 
 
0 #3 2011-09-29 12:09
Köszi, megnézem...
Üdv.:KZs
Idézet
 
 
0 #2 Manó 2011-09-27 19:53
Szia,
J1.7-tel még nem volt időm foglalkozni, ezért sajnos hack megoldást nem tudok rá.
Amikor ez a bejegyzés készült, akkor a MaxiMenuCk még nagyon gyerekcipőben járt, de most szerintem azzal próbálnám meg.
üdv
Manó
Idézet
 
 
0 #1 2011-09-26 18:02
Szia! Nagyon hasznos ez a cikk, örülök hogy rátaláltam az odaladra! Azt szeretném kérdezni, hogy tudnál-e abban segíteni, hogy ehhez a megoldáshoz hasonlóan hogyan lehetne utólag a saját Joomla! 1.7 sablonomba is "beleépíteni" ezt a megoldást. Köszönöm! Üdv.: Kovács Zsolt
Idézet
 

Szóljon hozzá!


Biztonsági kód
Frissítés

Mi is ez az oldal?

mano

Molnár László vagyok és ezen az oldalon főként a Joomla tartalomkezelő rendszerrel kapcsolatos dolgaimat találhatod.

Jegyzeteim igyekszem mások által is emészthető formában hozni, és időről-időre publikálni az oldalon.

Készülőben néhány bővítményem, amiket remélem hasznosnak fogsz találni.

Hasznos böngészést!
Manó