Rozbaľovacie mootools menu

[slavkozn]

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: Select all

      <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: Select all

      <?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: Select all

      <?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: 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; ?>

Ď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: 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;
}

Nájdite v "template.css" definíciu "#header .bgbl" a zmeňte jej spodný padding na 0

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;
}

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: Select all

#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: Select all

#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: Select all

{duration: 300}

a vložte pred neho tento kód

Code: Select all

{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: 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);
            }

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.

[severdia]

Vyborne! Teraz napis vsekto v anglictine..

[frenkacik]

paradny navod...
hned som to vyskusal
nebolo by odveci keby sa ta sablona dala spravit bez zaverecneho nastavovania v administratorskom prostredi (Správca modulov > Module Manager). Proste ten komu tu sablonu dam si ju len nakopiruje do adresara templates, aktivuje ju a hotovo.
Privitam akekolvek riesenie...
http://frenkacik.[URL banned].com/

[snow23]

a mne to stále nejde a nejde omg 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

[snow23]

pls pošlite mi niekto už upravený ten templát s tym mootols ja sa na to kuknem či je chyba vo mne alebo niekde v joomle .... dík