--=REKLAMA=--

Jak stworzyć rozwijane menu w CSS?

Z Joomla!WikiPL

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!.

Suckerfish w połączeniu z modułem Extended menu

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

  • Styl menu [Menu style]: Lista - drzewo [Tree List]
  • Rozwiń menu [Expand Menu]: Tak

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.

Suckerfish w połączeniu ze standardowym modułem menu Joomla!

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.