Jdwind
14-07-2012, 10: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ć.
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ć.