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.