Joomla!WikiPL

Poradnik objaśnia, w jaki sposób bez instalowania dodatkowych modułów uzyskać rozwijalne menu poziome w szablonach Beez dla Joomla 2.5

Nasze górne menu (top) umieszczamy w pozycji "position-1". Aby zapewnić odpowiednie formatowanie, musimy dokonać niewielkiej zmiany w głównym pliku szablonu oraz dodać nieco kodu formatującego do arkusza css.

1. W pliku index.php szablonu (templates/beez5/index.php około linii 126, templates/beez_20/index.php około linii 134) mamy poniższy kod:

<jdoc:include type="modules" name="position-1" />

Zamieniamy go na:

<div id="menutop"><jdoc:include type="modules" name="position-1" /></div>

Zapisujemy i zamykamy.

2. W pliku templates/beez5/css/beez5.css (dla szablonu beez_20 jest to plik templates/beez_20/css/layout.css) na samym końcu dodajemy:

#menutop ul {padding: 0;}
#menutop li {list-style-type: none; margin: 0 auto; float: left; position: relative;}
#menutop ul li ul li {background: transparent !important;height: 40px;border-bottom: 1px solid #ddd !important;width: 160px;}
#menutop li a {display: block; text-decoration: none;line-height: 35px;} 
#menutop li a:hover {color: #000000;}
#menutop li li a {padding: 5px !important;} 
#menutop li ul {display: none; background: #E9E9E9;border: 1px solid #ddd !important;} 
#menutop li:hover ul {position: absolute; padding: 0; display: block; width: 160px;top:35px;left:0px;} 
#menutop ul li ul li a {line-height: 30px;font-size: 14px !important;display:block !important;}
#menutop ul ul ul {display: none !important;position: absolute;width:160px;}
#menutop ul li ul li.deeper.parent ul {}
#menutop ul li.deeper.parent:hover {background: #ddd;}
#menutop ul li ul li.deeper.parent:hover ul {display:block !important; top: 0px; left: 160px; border-top: 1px solid #ccc;}

Zapisujemy i zamykamy.

Poniższe opcje nie są obowiązkowe.

3. W przypadku szablonu beez_20 w pliku templates/beez_20/css/personal.css odnajdujemy:

#header ul.menu li a:link,
#header ul.menu li a:visited

i zmieniamy:

padding:12px 15px;

na:

padding:1px 15px;

4. W przypadku szablonu beez5 w pliku templates/beez5/css/beez5.css możemy zakomentować:

/*#header ul
{
max-width:1030px;
right:15px;
}*/

natomiast w pliku templates/beez5/css/layout.css odnajdujemy:

#header ul
{
        display:block;
        margin:0px 0px 1px 0px;
        text-align:right;
        list-style-type:none;
        padding:10px 0px 10px 0px;
        position:absolute;
        top:0;
        right:0px;
        width:100%
}

i text-align:right zmieniamy np. na left (lub usuwamy wyrównanie tekstu).

5. Teoretycznie wszystko powinno już działać (dla dwóch poziomów podmenu). Pamiętajmy, żeby w panelu administratora na zapleczu w ustawieniach modułu dla górnego menu (top), w opcjach podstawowych > Pokaż pozycje podmenu zaznaczyć Tak (jak na poniższym obrazku).

Efekty wynikowe poniżej - dla szablonu Beez_20:

oraz dla szablonu Beez5: