--=REKLAMA=--
Ze względu na poprawność kodu oraz szczupłość stron, żadne rozwiązania flash ani JavaScript nie są zalecane. Ale wiele rozwiązań rozwijanego menu wykorzystuje jedną z tych technologii. Istnieje kilka technik pozwalających uzyskać atrakcyjne wizualnie menu niemal wyłącznie za pomocą CSS i ograniczeniu do minimum JavaScript.
Wszystkie one korzystają z listy nieuporządkowanej (znanej lepiej jako punktowana). Często stosowanym rozwiązaniem jest menu rozwijane znane pod nazwą “suckerfish”. Jego czysty CSS jest niewielkie, łatka bezpłatna i zawiera tylko 12 linii kodu JavaScript, naprawiającego niewielkie usterki w IE6 i dawniejszych. Możesz zobaczyć demo. Bardziej szczegółowe przewodniki dotyczące techniki Suckerfish można znaleźć na stronach htmldog.com oraz alistapart.com
Suckerfish działa bardzo dobrze w połączeniu z Joomla!.
Aby przekonać się, że Suckerfish działa dobrze, potrzebujesz aby kod Twojego menu był generowany w postaci czystej listy. Tak się składa, że istnieje specjalny moduł, który generuje taki kod. Nazywa się Extended_menu, znajdziesz go tutaj oraz na JED.
Tak więc pobierz i zainstaluj ten moduł, a następnie skonfiguruj go. Najważniejsze, jeśli przypisujesz temu menu i modułowi przyrostek klasy CSS. Zastosowałem “mainnav” (CSS zobaczysz poniżej). Kilka innych ustawień, które trzeba poczynić, to
Następnie umieść menu w wybranej pozycji i przejdź do CSS. Nie jest to łatwe i osiągnięcie pożądanego efektu zajęło mi kilka prób i błędów, które może pominąć i wykorzystać mój kod.
So put the menu where you want it, then to the CSS. This is a little tricky, it took me some trial and error to get the effects I wanted, but you can just skip that part and use mine. :)
#twocols{ /*kolumna, w której zostanie umieszczone rozwijane menu, u ciebie moze byc inna*/ z-index:20; } #leftcol{ /*kolumna, w której zostanie umieszczone rozwijane menu, u ciebie moze byc inna*/ z-index:10; } .moduletablemainnav { /* Zastosowalem pozycjonowanie absolutne, mozesz inaczej*/ position:absolute; top:187px; left:20px; z-index:100; font:0.9em Verdana, Arial, Helvetica, sans-serif; margin:0; padding:0; } #mainlevelmainnav,#mainlevelmainnav ul { float:left; list-style:none; line-height:1em; background:transparent; font-weight:700; margin:0; padding:0; } #mainlevelmainnav a { display:block; color:#f90; text-decoration:none; margin-right:15px; padding:0.3em; } #mainlevelmainnav li { float:left; padding:0; } #mainlevelmainnav li ul { position:absolute; left:-999em; height:auto; width:11em; font-weight:400; background:#36f; border:#00C 1px solid; margin:0; } #mainlevelmainnav li li { width:11em; } #mainlevelmainnav li ul a { width:11em; color:#fff; font-size:0.9em; line-height:1em; font-weight:400; } #mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{ left:-999em; } #mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover l,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul { left:auto; z-index:6000; } #mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover { background:#039 url(../images/soccerball.gif) 98% 50% no-repeat; }
Now, just make sure you have the z-indexes set up properly, also remember to have a z-index, the element needs some sort of positioning, if not absolute then relative.
Teraz upewnij się jedynie, że poprawnie został ustawiony stos (z-index), pamiętajmy, że jeśli korzystamy z z-index, musisz zastosować pozycjonowanie - jeśli nie absolutne (position: absolute) to względne (position: relative)
Ostatnie, co trzeba zrobić, ale niemniej ważne, to dodać w sekcji head szablonu niewielki kod JavaScript (albo dołączyć plik js z kodem), który w starszych IE rozwiąże problem nieobsługiwanej pseudoklasy :hover.
<script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>
Jeśli wszystko dobrze pójdzie, powinieneś uzyskać eleganckie, poprawne, walidujące się rozwijane menu.
The second approach is to implement Drop Down menu using the mod_mainmenu module that comes with Joomal 1.5. I've played around with the “suckerfish” and CSS to make this work. This work perfectly in IE 7 as well as Netscape.
1. Stwórz swoje menu z następującą hierarchią:
Menu 1.
– Menu 1 odnośnik 1.
– Menu 1 odnośnik 2.
– Menu 1 odnośnik 3.
2. Skonfiguruj parametry modułu menu następująco:
• jako styl menu zaznacz Lista.
• opcję Pokaż podmenu ustaw zawsze na Tak.
• przyrostek klasy CSS menu ustal san - możesz zastosować inny, ale pamiętaj wówczas, by dokonać odpowiednich modyfikacji w plikach CSS i JS.
3. W pliku index.php swojego szablonu w sekcji <head> umieść następujący kod JS
/* ********* poczatek kodu JavaScript rozwijanego menu **********/ <script type=”text/javascript”><!–//–><![CDATA[//><!– // jeśli używasz pliku .js, a linia jest niepotrzebna sfHover = function() { var sfEls = document.menusan.getElementsByTagName(”LI”); for (var j=0; j<sfEls.length; j++) { sfEls[j].onmouseover=function() { this.className+=” sfhover”; } sfEls[j].onmouseout=function() { this.className=this.className.replace(new RegExp(” sfhover\\b”), “”); } } } if (window.attachEvent) window.attachEvent(”onload”, sfHover); //–><!]]></script> // jeśli używasz pliku .js, a linia jest niepotrzebna /* ********* koniec kodu JavaScript rozwijanego menu **********/
4. Poniżej znajduje się odpowiedni kod CSS stylizujący rozwijane menu
/****************** Menu rozwijane - poczatek **************/ .menusan { /* zastosuj do spozycjonowania swojego menu */ position: relative; left: 10px; } .menusan, .menusan li, .menusan li ul { /* wszystkie listy */ padding: 0; margin: 0; list-style: none; } .menusan li a { display: block; width: 10em; color:#FFFFFF ; background-color:#BC031F; border:2px solid #BC031F; text-decoration:none; } .menusan li { /* wszystkie elementy list */ float: left; width: 10em; /* potrzebna dla Opery */ border-bottom:1px solid #ccc; } .menusan li ul { /* lista drugiego poziomu */ position: absolute; width: 10em; left: -98%; /* użyj negatywnego marginesu zamiast własności display, aby ukryć menu, ponieważ własność display: none jest interpretowana przez czytniki ekranu dosłownie*/ } .menusan li a:hover { border:2px solid #8C7AD6; background-color:#8C7AD6; color:#fff; } .menusan li:hover ul, .menusan li.sfhover ul { /* lists nested under hovered list items */ left: auto; /* zmieniaj na 10px, 20px, etc aby uzyskać wcięcie pozycji podmenu */ } /****************** Menu rozwijane - koniec **************/
5. Zapisz wszystko. Powinno być dobrze.
6. Sztuczka Możesz użyć pojedynczego menu, aby stworzyć wiele rozwijanych menu. Oto jak to zrobić. Najpierw stwórz menu z następującą hierarchią, by mieć dwa rozwijane menu, Menu 1 i Menu 2
Menu 1.
– Menu 1 Odnośnik 1.
– Menu 1 Odnośnik 2.
– Menu 1 Odnośnik 3.
Menu 2.
– Menu 2 Odnośnik 1.
– Menu 2 Odnośnik 2.
– Menu 2 Odnośnik 3.
Możesz się pobawić trochę CSS, aby spozycjonować drugie menu, etc.