PDA

Zobacz pełną wersję : Poziome rozwijane menu w szablonie Beez5 za pomocą CSS



Jdwind
14-07-2012, 11:55
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 (http://www.test2.wtzprzymops.com/). Menu działa do dwóch poziomów, ale nic nie stoi na przeszkodzie, by je dalej rozbudować.

amigo
14-07-2012, 18:12
Rewelacji nie ma, lecz może komuś się sprzyda. Jak wiadomo teraz liczy się treść a nie grafika więc jest ok :)

Jdwind
14-07-2012, 20:54
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
14-07-2012, 23:55
A właśnie, że rewelacja, prosto i szybko bez dodatkowych skryptów.

ramiro
15-07-2012, 01:54
Bardzo fajnie :)

maj_ka
25-01-2013, 21:53
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
26-01-2013, 00:23
Musiałabyś link podać, bo akurat nie mam nigdzie tego szablonu zainstalowanego.

maj_ka
26-01-2013, 00:48
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
26-01-2013, 01:16
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
26-01-2013, 01:25
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

Jdwind
26-01-2013, 10:33
Z całą pewnością chodzi o z-index, bo ostatnia pozycja chowa Ci się pod nadrzędny kontener, o ile dobrze widzę. Firebug i sprawdzaj po kolei :)

maj_ka
26-01-2013, 17:30
no właśnie wydaje mi się że sprawdziłam wszystko co mogłam. dlatego wyczerpawszy limit postanowiłam zapytać

Jdwind
26-01-2013, 23:58
No dobrze, ale jak 1.5 ma się rozwijać w 1 skoro jest w menu 5?

maj_ka
27-01-2013, 00:07
sluszna uwaga. zobaczylam to wlasnie jak dalam do innej pozycji :))) sek w tym ze rownolegle zrobilam podana przez ciebie zmiane na localhost gdzie menu jest zbudowane tak jak podalam na poczatku - i tez nie zadzialalo. ale ok, najpier zobaczmy tutaj:)

maj_ka
27-01-2013, 02:17
rozwiązałam: poza tym że trzeba dodać z-index: 1 tam gdzie była mowa , to jeszcze w nature.css w #header: overflow:visible