V Joomla! fóre som našiel zaujímavý príspevok (
How to add a drop down mootools menu to your template) o tom, ako do šablóny začleniť rozbaľovacie (drop down) menu, vytvorené pomocou frameworku
MooTools, ktorý je súčasťou Joomla! 1.5.x. Tento príspevok som, so súhlasom autora, preložil.
Stretol som sa vo fóre s mnohými ľuďmi, ktorí sa pýtajú na spôsob pridania rozbaľovacieho menu do ich šablón. Nie je to zložité, teraz si postup rozoberieme pekne krok za krokom a ako ukážkovú šablónu použijeme "
Red Evolution Aphelion".
Najprv vytvorte v šablóne novú modulovú pozíciu, ktorú nazvite, povedzme, "
hornav". Aby táto nová pozícia bola prístupná v administračnom rozhraní, musíte ju pridať do súboru "
/templates/redevo_aphelion/templateDetails.xml", takže otvorte tento súbor a pridajte nasledujúci kód pod značku "
<positions>"
Code:
<position>hornav</position>
Teraz vložte svoju novú modulovú pozíciu do súboru
index.php šablóny, choďte do hlavičkového
div a nájdite tento kód (riadok 69)
Code:
<?php if($this->countModules('top')) : ?>
<div id="top">
<jdoc:include type="modules" name="top" style="xhtml" />
</div><!--top-->
<?php endif; ?>
a pod neho vložte tento kód
Code:
<?php if ($this->countModules('hornav')): ?>
<div id="hornav">
<jdoc:include type="modules" name="hornav" />
</div>
<?php endif; ?>
Teraz pripravte trochu JavaScriptu, pomocou ktorého použijete MooTools efekty pre svoje menu. Potrebný JavaScriptový súbor je v pripojenom súbore "
moomenu.js", ktorý umiestnite do adresára "
js" svojej šablóny.
Poznámka: Ak zvolíte
id pre
div iné ako "
hornav", je treba uupraviť aj súbor
moomenu.js.
Aby ste JavaScript zo súboru "
moomenu.js" zahrnuli do šablóny, je treba na koniec sekcie
head v súbore
index.php pridať tento kód:
Code:
<?php if ($this->countModules('hornav')): ?>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/moomenu.js"></script>
<?php endif; ?>
Ďalej pripravte svoje menu. Presuňte ho do novo vytvorenej pozície (môžete presunúť iné menu alebo vytvoriť nové). Prejdite do administračného rozhrania a z menu vyberte
Rozšírenia (
Extensions) >>
Správca modulov (
Module Manager) >> Kliknite na main menu
- v časti Podrobnosti (Details) zmeňte Pozíciu (Position) na "hornav";
- v časti Parametre modulu (Module Parameters) zmeňte Vždy zobrazovať položky podponuky (Always show sub-menu Items) na "yes";
- v časti Rozšírené parametre (Advanced Parameters) nastavte Príponu triedy modulu (Menu Class Suffix) na "_horiz" (bez úvodzoviek),
Poznámka: ak zvolíte inú príponu triedy modulu ako _horiz, musíte upraviť aj moomenu.js, - uložte zmeny.
Teraz pridajte trochu CSS. Otvorte súbor "
/templates/redevo_aphelion/css/template.css" a pridajte do neho tento kód
Code:
#hornav {
clear:both;
display:block;
height:40px;
}
#hornav .moduletable {
margin:0;
}
#hornav ul {
margin:0;
padding:0;
width:auto;
}
#hornav ul li {
margin:0;
padding:0;
height:40px;
float:left;
position:relative;
}
#hornav ul li a {
color:#d0d0d0;
text-transform:uppercase;
padding:10px;
height:20px;
display: block;
background:url(../images/topmenu-vline.jpg) no-repeat;
background-position:0px 2px;
}
#hornav ul li a:hover {
text-decoration:none;
}
#hornav ul li ul {
display:block;
height:auto;
width: 14em;
position:absolute;
z-index:99;
left: -999em;
background-color:#333333;
}
#hornav ul li ul ul {
margin: -40px 0 0 14em;
}
#hornav ul li li {
width: 14em;
}
#hornav ul li li a {
color:#d0d0d0;
text-transform:none;
display: block;
background:none;
padding:10px;
}
#hornav ul li ul {
left: -999em;
}
#hornav ul li:hover ul ul, #hornav ul li:hover ul ul ul {
left: -999em;
}
#hornav ul li:hover ul, #hornav ul li li:hover ul, #hornav ul li li li:hover ul {
left: auto;
}
Nájdite v "
template.css" definíciu "
#header .bgbl" a zmeňte jej spodný
padding na 0
Code:
#header .bgbl{
background:url(../images/headerbg_bl.jpg) no-repeat;
background-position:15px 100%;
height:auto!important;
height:100px;
min-height:100px;
padding:0px 24px 0px 24px;
position:relative;
}
Netreba zabudnúť urobiť potrebné korekcie kvôli IE. Pridajte "
position:relative;" a "
z-index: 1;" do "
#header", stále v súbore "template.css"
Code:
#header{
margin-top:16px;
background:#2f2f2f url(../images/headerbg_m.jpg) top left repeat-x;
color:#fff;
position:relative;
z-index: 1;
}
Šablóna
redevo_aphelion má rôzne farebné variácie, ak používate povedzme oranžovú (
orange) farbu, otvorte súbor "
/templates/redevo_aphelion/css/orange.css" a pridajte do neho
Code:
#hornav ul li a:hover{
background: transparent url(../images/orange/topmenu-bg.jpg) repeat-x;
background-position:0px 1px;
}
Pre ostatné farebné variácie urobte to isté v príslušných súboroch.
Poznámka: Toto CSS je pre šablónu
redevo_aphelion, ak používate inú šablónu, bude potebné prispôsobiť CSS svojej šablóne.
A to je všetko, blahoželám! Teraz máte plne funkčné vodorovné rozbaľovacie MooMenu.
Z reakciíí...Ako použiť pre submenu prechody, ako zbalenie?
Prechodové efekty (
transition) sú v
moomenu.js zahrnuté. Pre ich prispôsobenie nájdite kód (riadok 94 a 97)
Code:
{duration: 300}
a vložte pred neho tento kód
Code:
{transition: Fx.Transitions.XXX.YYY},
kde
XXX je požadovaný prechod (
transition), ktorý chcete použiť a
YYY je mód (
easeIn,
easeOut alebo
easeInOut). Tu je príklad (nahraďte kód od riadku 92 až po 99 týmto):
Code:
if (this.parent._id)
{
this.myFx2 = new Fx.Style(this, 'width', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
this.myFx2.set(0);
}else{
this.myFx2 = new Fx.Style(this, 'height', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
this.myFx2.set(0);
}
Môžete tiež zmeniť aj trvanie (
duration).
Zoznam dostupných prechodov hľadajte
v dokumentácii MooTools alebo začnite preskúmaním sekcie
demo, kde nájdete všetky dostupné MooTools efekty.
robím všetko úplne podľa návodu ja neviem v čom je chyba ale vždy mi vyhodí všetky zložky v menu vedľa seba čiže sa to nevysúva lebo to čo sa má vysunúť je zobrazené vedľa hlavného súboru ja už neviem skúšam ako skúšam