[Tutorial JS] Exemplu meniu drop down simplu

[Tutorial JS] Exemplu meniu drop down simplu

#1 de BoGdY

Nume Tutorial: Exemplu meniu drop down simplu
Descriere: Exemplu meniu drop down simplu
Download:
Autor: Anonim
Sursa (Link-ul oficial):

Afiseaza Textul

Propria parere: Folositor.
Tutorialul:

După câteva ore de căutare şi studiu am reuşit să fac şi eu un meniu drop-down simplu. Cu puţin cod html, css şi javascript am creat o listă de tip meniu pe care încerc să o descriu mai jos. Desigur că proprietăţile se pot aplica la aproape orice, atât la paragrafe cât şi la div-uri sau alte elemente html şi astfel puteţi crea elemente ascunse în pagină care vor apare la un simplu click de mouse.
Pentru început creăm o listă care va fi pe post de meniu:

INDEX
Pagina 1
Meniu ascuns
Pagina 2
Pagina 3
Pagina 4
Meniu ascuns
Pagina 5
Pagina 6
Meniu ascuns
Pagina 7
Pagina 8
Pagina 9

Cod: Selectaţi tot

 <ol>
 <li><a href="index.php">INDEX</a></li>
 <li><a href="pagina1.php">Pagina 1</a></li>
 <li><a href="#" onClick="afiseazaMeniu(1); return false;">Meniu ascuns</a></li>
 <ul id="1" class="ascunde">
 <li><a href="pagina2.php">Pagina 2</a></li>
 <li><a href="pagina3.php">Pagina 3 </a></li>
 </ul>
 <li><a href="pagina4.php">Pagina 4</a></li>
 <li><a href="#" onClick="afiseazaMeniu(2); return false;">Meniu ascuns</a> </li>
 <ul id="2" class="ascunde">
 <li><a href="pagina5.php">Pagina 5</a></li>
 <li><a href="pagina6.php">Pagina 6</a> </li>
 <li><a href="#" onClick="afiseazaMeniu(3); return false;">Meniu ascuns</a></li>
 <ul id="3" class="ascunde">
 <li><a href="pagina7.php">Pagina 7</a></li>
 <li><a href="pagina8.php">Pagina 8</a></li>
 </ul>
 </ul>
 <li><a href="pagina9.php">Pagina 9</a></li>
 </ol

După cum vedeţi mai sus, este un meniu simplu cu 9 pagini (se pot adăuga câte pagini şi submeniuri doriţi, singura condiţie este să specificaţi la <ul id="ceva" class="ascunde"> id-ul unic pentru acea secţiune şi apoi la link să apelaţi funcţia javascript afiseazaMeniu("ceva") unde "ceva" este id-ul care doriţi să apară sau să dispară când daţi click pe el...
Mai departe trebuie creată clasa CSS care ascunde meniurile pe care nu dorim să le afişăm decât atunci când se dă click pe ele.

Cod: Selectaţi tot

 <style type="text/css">
 <!--
 .ascunde
 {
 display: none;
 }
 -->
 </style>

Desigur că se poate redenumi cum doriţi, atâta timp cât clasa CSS este specificată cu acelaşi nume în meniu sau la elementele HTML pe care doriţi să le ascundeţi.
În continuare cu aceste 2 bucăţele de cod avem un meniu care are ascunse porţiunile care au atribuită clasa CSS cu numele "ascunde" dar mai trebuie o bucată de cod javascript care să facă afişarea acelor bucăţi de cod ascunse în funcţie de id-ul specificat. Pentu asta avem:

Cod: Selectaţi tot

 <script language="javascript" type="text/javascript">
 <!--
 var ascunsa = false
 function afiseazaMeniu(identificator) {
    if (ascunsa) {
       document.getElementById(identificator).style.display="none";
       ascunsa = false
    }
    else {
       document.getElementById(identificator).style.display="block";
       ascunsa = true
    }
 }
 -->
 </script>

Codul de mai sus am încercat să îl scriu cât mai simplu şi mai inteligibil ca să îl înţeleagă toata lumea. O să încerc în continuare să explic ce am scris în codul javascript de mai sus.
Prima dată se iniţializează o variabilă cu numele "ascunsa" cu valoarea false.
Am pus false pentru că meniurile sunt deja ascunse, dar puteam să pun orice altă valoare...
Mai departe se crează funcţia care este apelată la comanda onClick din meniu, din link. Această funcţie verifică starea variabilei cu numele "ascunsa" şi în funcţie de stare aplică un stil CSS elementului HTML cu id-ul specificat. Astfel dacă valoarea variabilei este "true" se ascunde meniul şi se setează variabila ca "false". La următorul click, valoarea este deja "false" şi atunci se execută cealaltă parte a instrucţiunii if şi se afişează meniul care era ascuns după care se setează variabila ca "true" în aşteptarea unui nou click de mouse. Ascunderea şi afişarea meniului se face în funcţie de identificatorul specificat, în acest caz id="1" 2 sau 3.
În continuare o să repun toate bucăţile de cod de mai sus în ordinea normală pentru a putea vedea exact cum e codul şi ca să puteţi să îl testaţi voi înşişi şi să îl modificaţi cum doriţi.

Cod: Selectaţi tot

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta name="description" content="Autor: Birkoff Contact:  www.tutoriale.far-php.ro">
 <title>Meniu drop down simplu</title>
 <style type="text/css">
 <!--
 .ascunde {
    display: none;
 }
 -->
 </style>
 <script language="javascript" type="text/javascript">
 <!--
 var ascunsa = false
 function afiseazaMeniu(identificator) {
    if (ascunsa) {
       document.getElementById(identificator).style.display="none";
       ascunsa = false
    }
    else {
       document.getElementById(identificator).style.display="block";
       ascunsa = true
    }
 }
 -->
 </script>
 </head>
 
 <body>
 <ol>
 <li><a href="index.php">INDEX</a></li>
 <li><a href="pagina1.php">Pagina 1</a></li>
 <li><a href="#" onClick="afiseazaMeniu(1); return false;">Meniu ascuns</a></li>
 <ul id="1" class="ascunde">
 <li><a href="pagina2.php">Pagina 2</a></li>
 <li><a href="pagina3.php">Pagina 3 </a></li>
 </ul>
 <li><a href="pagina4.php">Pagina 4</a></li>
 <li><a href="#" onClick="afiseazaMeniu(2); return false;">Meniu ascuns</a> </li>
 <ul id="2" class="ascunde">
 <li><a href="pagina5.php">Pagina 5</a></li>
 <li><a href="pagina6.php">Pagina 6</a> </li>
 <li><a href="#" onClick="afiseazaMeniu(3); return false;">Meniu ascuns</a></li>
 <ul id="3" class="ascunde">
 <li><a href="pagina7.php">Pagina 7</a></li>
 <li><a href="pagina8.php">Pagina 8</a></li>
 </ul>
 </ul>
 <li><a href="pagina9.php">Pagina 9</a></li>
 </ol>
 </body>
 </html>

Puteţi copia acest cod într-o pagină HTML şi să testaţi. Personal am testat doar pe Internet Explorer versiunea 6 şi 7 şi pe Opera versiunea 9 şi pe Firefox versiunea 2 şi funcţionează ok. Spor la butonat.

[Tutorial JS] Exemplu meniu drop down simplu

[Tutorial JS] Exemplu meniu drop down simplu

Cine este conectat