in Code

JavaScript meni na “razvlačenje” [en]

Na mnogim sajtovima ste videli meni koji ima mogućnost da širi i skuplja svoje podkategorije. Sa nekoliko linija JavaScript-a i meni na vašem sajtu ili blogu može da dobije ovu funkcionalnost. Svaki pod-meni u vašem meiju će moći da se skuplja i širi, tj da se vidi ili da ne bude vidljiv, što daje utisak da se vaš meni može “razvlačiti”.

Primer menija u HTML jeziku:

  1.  
  2. <ul>
  3.     <li>Muzika
  4.        <ul>
  5.          <li>Pop</li>
  6.          <li>Rok</li>
  7.          <li>Dance</li>
  8.          <li>Hip-Hop</li>
  9.        </ul>
  10.     </li>
  11.     <li>Sport
  12.        <ul>
  13.          <li>Basket</li>
  14.          <li>Atletika</li>
  15.          <li>Vaterpolo</li>
  16.          <li>Tenis</li>
  17.        </ul>      
  18.     </li>
  19.     <li>Ostalo</li>
  20. </ul>
  21.  

Klasičan meni izgleda ovako:

  • Muzika
    • Pop
    • Rok
    • Dance
    • Hip-Hop
  • Sport
    • Basket
    • Atletika
    • Vaterpolo
    • Tenis
  • Ostalo

Javascript funkcija koja će praktično da menja stil liste, tako da kada je stil display==”none” podkategorije te liste neće biti vidljivi, a kada je stil display=”block” podkategorije će se prikazati.

  1.  
  2. <script type="text/javascript">
  3.   function razvuci(list){
  4.     var listElementStyle=document.getElementById(list).style;
  5.     if (listElementStyle.display=="none"){
  6.       listElementStyle.display="block";
  7.     else {
  8.       listElementStyle.display="none";
  9.     }
  10.   }
  11. </script>
  12.  


Klasičnom meniju treba da dodelimo neke CSS identifikatore, i to svakom li tagu koji u sebi ima podmeni tj. ul tag. Pre li taga sa identifikatorom, dodaćemo još jedan li tag koji će da poziva JavaScript funkciju razvuci koju smo prethodno napisali. Tako da će izmenjena meni lista izgledati ovako:

  1.  
  2. <ul>
  3.     <li><a href="javascript:razvuci(‘muzika’)">Muzika</a></li>
  4.     <li style="display: none;" id="muzika">
  5.        <ul>
  6.          <li>Pop</li>
  7.          <li>Rok</li>
  8.          <li>Dance</li>
  9.          <li>Hip-Hop</li>
  10.        </ul>
  11.     </li>
  12.     <li><a href="javascript:razvuci(‘sport’)">Sport</a></li>
  13.     <li style="display: none;" id="sport">
  14.        <ul>
  15.          <li>Basket</li>
  16.          <li>Atletika</li>
  17.          <li>Vaterpolo</li>
  18.          <li>Tenis</li>
  19.        </ul>      
  20.     </li>
  21.     <li>Ostalo</li>
  22. </ul>
  23.  

Još je ostalo da JavaScript funkciju povežemo sa identifikatorima. Sledeća linija koda će da poveže identifikatore sa JS funkcijom: document.getElementById(‘muzika’).style.display=”none”;

  1.  
  2. <script type="text/javascript">
  3. document.getElementById(‘muzika’).style.display="none";
  4. document.getElementById(‘sport’).style.display="none";
  5.   function razvuci(list){
  6.     var listElementStyle=document.getElementById(list).style;
  7.     if (listElementStyle.display=="none"){
  8.       listElementStyle.display="block";
  9.     else {
  10.       listElementStyle.display="none";
  11.     }
  12.   }
  13. </script>
  14.  

Da dodamo da li tagovi sa identifikatorima muzika i sport imaju stil: style=”display: none;” što znači da se pri učitavanju stranice ti tagovi neće prikazati, pa će meni biti “skupljen”. Tek kada korisnik klikne na linkove Muzika ili Sport koji pozivaju JavaScript funkciju li tagovi sa identifikatorika će se prikazati.

Write a Comment

Comment