E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Javascript

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DEVELOPMENT  /  Javascript  /  Efecte (2)

Crearea unui menu glisant in Javascript

12.05.2008
Crearea unui menu glisant in Javascript

Folosirea JavaScript pentru crearea unui meniu glisant.

Total vizualizari: 4455 4455 afisari   |   Comentarii  2   |   Rating   |   (1 vot)   |   Timp necesar: 20 min 20 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  E-learn.ro  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza
<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>
Pagina:
1
comenteaza printeaza
Alte tutoriale Javascript:
Noteaza acest tutorial
Rating tutorial
 
(1 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
vochin_ionel , Marti, 10 Martie 2009
#2

am uitat sa mentionez ca vrea sa faca asta fara sa dau refresh.....se poate?????

Raporteaza acest comentariu ca injurios!
vochin_ionel , Marti, 10 Martie 2009
#1

frumos tutorial....as vrea sa creez un site de telefoane mobile...cu 2 meniuri.....unu in care poti sa iti alegi marca telefonului si al dioilea sa poti sa iti alegi modelul telefonului.....
iar cand selectez marca vrea sa imi apara la in meniul model doar modelele de la aceea marca selectata.....ma puteti ajuta????????

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4550
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4460
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4415
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4285
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4165
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Gimp Flash HTML Java RoR Lightroom SEO SWF Powerpoint CSS StyleSheet Verilog JSON Dreamweaver Fireworks XML COREL DRAW Vista Excel Javascript PSD Bridge AJAX Word PHP MySQL Fotografie Python Swift 3D Action Script Photoshop Sony Vegas Outlook Ruby on Rails XHTML Illustrator
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software