Poziome rozwijane menu w szablonie Beez5 za pomocą CSS

[Jdwind]

Szukałem prostego, rozwijanego menu, bez zbędnych wodotrysków, dla szablonu BEEZ5, ale niestety nie znalazłem. Poniżej to, co udało mi się osiągnąć - można jeszcze poprawić, dostosować kolor do własnych potrzeb, ale na początek zupełnie wystarcza, no i nie trzeba instalować niepotrzebnych dodatków.

1. Najpierw ubieramy w diva listę menu (mowa o topmenu w pozycji position-1). W pliku index.php templatki, około linii 132 mamy coś takiego:

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

umieszczamy to między znacznikami: <div id="menutop"> ... </div>, zapisujemy i zamykamy.

2. W katalogu css/ edytujemy plik beez5.css i na końcu dopisujemy:

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

3. Odszukujemy w tym samym pliku:

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

i usuwamy lub komentujemy zawartość (/* .. */ jakby ktoś nie wiedział ).

4. Jeszcze możemy w pliku layout.css wiersz 80 zmienic text-align: right na left lub center, wg upodobań.

Możemy też ustawiać kolory wg własnych upodobań.
Przykład do zobaczenia TUTAJ. Menu działa do dwóch poziomów, ale nic nie stoi na przeszkodzie, by je dalej rozbudować.

[amigo]

Rewelacji nie ma, lecz może komuś się sprzyda. Jak wiadomo teraz liczy się treść a nie grafika więc jest ok

[Jdwind]

Prostota właśnie była powodem tego, co zrobiłem. Jakbym chciał "rewelacje" to bym użył np. Maxi Menu CK . Zresztą nic nie stoi na przeszkodzie, żebyś sobie dołożył do tego swoje obrazki.
Zapomniałem dodać, że w ustawieniach modułu TOP zaznaczamy oczywiście 'tak' przy opcji 'Pokaż pozycje podmenu', żeby pokazywało pozycje submenu.

[bogdanbojarski]

A właśnie, że rewelacja, prosto i szybko bez dodatkowych skryptów.

[ramiro]

Bardzo fajnie

[maj_ka]

Fajne. Owszem. Mam tylko pytanie - bo nie mogę trafić ani znaleźć - > w którym miejscu zmienić/dodać/skasować coś żeby 2 poziom menu nie chował się za część główną? (joomla 2.5.8, szablon beez2-natura)

[Jdwind]

Musiałabyś link podać, bo akurat nie mam nigdzie tego szablonu zainstalowanego.

[maj_ka]

mam na localhoscie, na serwerze mam szablon ale ze zbyt krotkim menu, zaraz dolepie

dolepione: http://kapl.ehost.pl/testowajoomla

pod test 1 powinno sie rozwijac od 1.1. do 1.5
a w 1.3 powinno byc: 1.3.1 i 1.3.2
a w 1.5 powinno byc 1.5.1

[Jdwind]

beez_20/css/layout.css wiersz 81 dopisz z-index: 1;
P.S.
I daj sobie np. text-align: center bo Ci się napisy nie mieszczą

[maj_ka]

dopisalam. ale zmiany nie widze

tez krazylam wokol z-index.
i sie zgubilam - nie wiem czy na to nie ma wplywu
linia 173 w nature.css - tam jest z-index 1000000!important
linia 162 nature.css - z-index 20000