WebCity.pl

Efekt ten przydaje siÄ™ bardzo przy konstruowaniu rozbudowanych menusów dla np. panelu administracyjnego. DomyÅ›lnie widoczne sÄ… tylko tytuÅ‚y dziaÅ‚ów i dopiero po klikniÄ™ciu na któryÅ› z nich ukazuje siÄ™ okienko z menu. Zaczynamy od stworzenia DIV'a, któremu ustawiamy za pomocÄ… CSS parametr <i>display</i> na <i>none</i> (nie pokazuj). Musimy nadać mu jakiÅ› charakterystyczny ID:

<div id="menus" style="display: none;">To jest moje znikajÄ…ce okienko.</div>

Teraz sporzÄ…dzamy w JavaScript funkcjÄ™, która zajmie siÄ™ jego pokazywaniem i ukrywaniem:

function openClose(id)
{
   if(document.getElementById) {
      element = document.getElementById(id);
   } else if(document.all) {
      element = document.all[id];
   } else return;

   if(element.style) {
      if(element.style.display == 'block' ){
         element.style.display = 'none';
      } else {
         element.style.display = 'block';
      }
   }
}

Za parametr przyjmuje ona ID elementu, na którym ma operować (zauważ, że dziÄ™ki temu może ona sÅ‚użyć nie tylko do DIV'ów).

Ostatnim krokiem jest utworzenie linka, który da dostÄ™p do naszej operacji internaucie:

<a href="javascript:void(0); openClose('menus');">Pokaż</a>

I to wszystko.