Crearea unui menu glisant in Javascript

<div id="testDiv">Meniul meu!</div>
<a href="#">Toggle</a>

Pentru adaugarea codului Javascript in document, avem nevoie de o functie "toggle" - functie ce va verifica daca meniul trebuie sa se deplaseze in sus sau in jos. O vom numi toggle_visible().

<script language="javascript">
var active = 1;
var height = 100;
function toggle_visible() {
    if(active == 0) {
        active = 1;
        divPlusOne();                
     } else if(active == 1){
        active = 0;
        divMinusOne();
     }
}
</script>

Primul lucru pe care trebuie sa il observi este variabila active(poate lua valorile 1 sau 0, 1 - meniu activ si are inaltime maxima, iar 0 - meniu ascuns si are inaltime 0). De fiecare data cand folosim functia toggle_visible() vom reinitializa variabila cu valoarea corespunzatoare. Variabila active este reinitializata de fiecare data cand se ruleaza functia. Odata cu schimbarea variabile active vei vedea ca este apelata si o alta functie.

function divMinusOne() {
    if(height >= 20) {
        height = height - 1;
        document.getElementById('testDiv').style.height = height + 'px';
        window.setTimeout('divMinusOne()', 1);
     } else {
         document.getElementById('testDiv').style.visibility="hidden";
     }
}

In scriptul de mai sus, mai intai se verifica inaltimea height iar cat timp valoarea este mai mare decat 20 vom rula divMinusOne() care va face meniul sa dispara. Daca functia este apelata si inaltimea este mai mica decat 20, atunci proprietatea style.visibility este setata pe hidden.

Cat timp inaltimea este mai mare decat 20 trebuie sa ii ajustam inaltimea, deci height=height -1 care reprezinta valoarea inaltimii div-ului - 1. Pentru a aplica noua valoarea pe div-ul nostru folosim proprietatea style.height.

Functia setTimeout iti permite reapelarea functiei dupa o perioada de timp. De fiecare data cand ajustam inaltimea se apeleaza divMinusOne() pana in momentul in care inaltimea este mai mica decat 20.

function divPlusOne() {
if(height <= 100) {
    document.getElementById('testDiv').style.visibility="visible";
    height = height + 1;
    document.getElementById('testDiv').style.height=height + 'px';
    window.setTimeout('divPlusOne()', 1);
}
}

Functia divPlusOne() este similara functiei divMinusOne() cu mentiunea ca are ca efect incrementarea inaltimii meniului. Mai intai se verifica inaltimea(maxim 100), iar cand este mai mica decat 100 se retrage meniul. Dupa incrementarea intaltimii se apeleaza divPlusOne() print setTimeout() pana cand meniul are din nou 100px. In final se creeaza un link pentru a apela functia toggle_visible().

<a href="#" onClick="toggle_visible()">Exemplu</a>

• Cookie-uri de sesiune
• Explicarea scriptarii cross-site
• XII. Link-uri si ferestre noi in JavaScript
• XI. Deschiderea unei ferestre noi (Pop-up)
• Lucrul cu cookie-urile