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: Select all
<position>hornav</position>
Code: Select all
<?php if($this->countModules('top')) : ?>
<div id="top">
<jdoc:include type="modules" name="top" style="xhtml" />
</div><!--top-->
<?php endif; ?>
Code: Select all
<?php if ($this->countModules('hornav')): ?>
<div id="hornav">
<jdoc:include type="modules" name="hornav" />
</div>
<?php endif; ?>
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: Select all
<?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; ?>
- 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.
Code: Select all
#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;
}
Code: Select all
#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;
}
Code: Select all
#header{
margin-top:16px;
background:#2f2f2f url(../images/headerbg_m.jpg) top left repeat-x;
color:#fff;
position:relative;
z-index: 1;
}
Code: Select all
#hornav ul li a:hover{
background: transparent url(../images/orange/topmenu-bg.jpg) repeat-x;
background-position:0px 1px;
}
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: Select all
{duration: 300}
Code: Select all
{transition: Fx.Transitions.XXX.YYY},
Code: Select all
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);
}
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.