Fa-szerkezetű menü [plugin] e107 alá, ikonokkal, és kibomló listával

Miért fontos a fa szerkezetü menü? Nem fontos. Évekig meg tudtunk lenni mobiltelefon nélkül is, és nem voltak soványabbak az emberi kapcsolataink. Azonban ha néha felfedeznek valami komolyan használhatót is a számítástechnikában, akkor azt okos dolog használni. És famenüt okos dolog. Megszokhattuk az intézőből, láthatjuk a kezdőlapot, pillantással fel lehet mérni, hogy mi miből hova, és persze dizájnos is, ami nem utolsó szempont. Most ezt a csodát megcsináltam e107 alá is, egy 2003-as javascriptes programból. Így néz ki:

famenu.jpg

A pluginnek [dtree-menu] 4 fontos fálja van amelyek kitöltése nélkül nem fog működni rendszerünk. Egy dtree.css-el adhatjuk meg az alapvető stílus beállításokat, egy dtree.js-el (javascript) bírhatjuk működésre, amelynél nagyon fontos, hogy a kisképek (monitor, mappa, stb) útvonalait absolute állítsuk be, különben nem fogja megtalálni a kicsi képeket. A harmadik fájl a dtree_menu ezen belül állítjuk be a faszerkezetet. Kedvesen benne hagytam a yato.hu menüjét, hogy összehasonlítva könnyebben megérthető legyen a “fa” kialakulása.

Ugye először is, a [d.add(2,0,’Kezdőlap’] d.add után szerepel egy sorszám, majd vessző, és ezután is egy szám. Ez a két szám mutatja a fában az ágakat, és leveleket. Látható, hogy én létrehoztam egy Szerszámok mappát, és ebben szerszámok vannak, azaz a Szerszámok mappa az ötös, sorszámmal kezdődik, a linkeknél pedig a második számjegy a hivatkozó számjegy, azaz az ötösre hivatkozik, mivel hogy ez a szülőmappa. Kis próbálgatással egészen érdekes szerkezeteket hozhatunk létre, persze figyelembe kell venni a fizikai korlátokat, azaz a menü szélességét. Ha készen vagyunk a menüvel, és feltöltöttük, célszerű a themes.php-ból a SITELINKS -et törölni, és a dtree_menu -t kirakni a menüben. Ja a legfontosabbat majdnem elfelejtettem: mivel a hívásnál szükségünk lesz egy HEAD-en belüli kódra, ezért az e107_themes/templates/header_default.php -ban a (kb:) 331 és 332.sorban írjuk át az elérési utakat megfelelőre. (mellékeltem a mappában). Azért kell a teljes elérési út mindenhova, mert ha relatíve elérést adunk meg, akkor a többi javás okosság (survey, wrap) keresztül húzhatja a számításainkat, és hibát okozhat a menüben. A dtree menüt a google szereti, kellemesen beindexeli, tehát nem kell félni attól, hogy esetleg pórul járunk a használatával.

A dtree-menü eredeti kódjának honlapja: http://destroydrop.com/javascripts/tree/

LETÖLTÉS: INNEN

← Vissza