JavaScript: Rozwijane menu

Rozwijane menu to dobry pomysł na uatrakcyjnienie stron WWW. Wykonamy je za pomocą JavaScriptu, poznając działanie pętli for i kilku innych funkcji języka.

Na początku zaprojektujemy strukturę HTML (patrz kod i rysunek poniżej):

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z menu</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" />
 
<!-- Nasz kod Javascript: -->
 
<script type=\"text/javascript\">
 
</script>
 
</head>
<body>
   <div style=\"width: 60px;\">
      <ul>
         <li id=\"main\">
         <a href=\"#\"><strong>Kategorie</strong></a>
            <ul id=\"menu\">
               <li><a href=\"#\">sport</a></li>
               <li><a href=\"#\">życie</a></li>
               <li><a href=\"#\">gry</a></li>
            </ul>
         </li>
      </ul>
   </div>
</body>
</html>

Stworzyliśmy prostą listę nieuporządkowaną otoczoną divem oraz nadaliśmy dwa identyfikatory o nazwach: menu i main.

Po naprowadzeniu wskaźnika myszy na Kategorie rozwinie się lista podkategorii: sport, życie i gry, po cofnięciu wskaźnika myszy lista powinna się schować. (Z poprzednich artykułów wiemy, że rozwinięcie listy to {stala}style.display = „block”;{/stala}, a schowanie – {stala}style.display = „none”;{/stala}.)

Style CSS

Domyślnie lista z kategoriami musi być schowana. Mamy więc dwie opcje do wyboru: albo ukryć cały {html}

{/html}. Wybierzemy drugi sposób i dodamy potrzebne style.

<style type=\"text/css\">
ul
{
   margin: 0;
   padding: 0;
}
li
{
   margin: 0;
   padding: 0;
   list-style-type: none;
}
#menu li
{
   display: none;
}
</style>

Nasz dokument przybrał postać (patrz kod poniżej i rysunek obok):

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z menu</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" />
 
<style type=\"text/css\">
ul
{
   margin: 0;
   padding: 0;
}
li
{
   margin: 0;
   padding: 0;
   list-style-type: none;
}
#menu li
{
   display: none;
}
</style>
 
<!-- Nasz kod Javascript: -->
 
<script type=\"text/javascript\">
 
</script>
 
</head>
<body>
   <div style=\"width: 60px;\">
      <ul>
         <li id=\"main\"><a href=\"#\"><strong>Kategorie</strong></a>
            <ul id=\"menu\">
               <li><a href=\"#\">sport</a></li>
               <li><a href=\"#\">zycie</a></li>
               <li><a href=\"#\">gry</a></li>
            </ul>
         </li>
      </ul>
   </div>
</body>
</html>

Szkielet skryptu

Pozostaje dać znać{html}

{/html}, że naprowadzenie nań wskaźnika myszy spowoduje ustawienie display na block. Zaś zwolnienie wskaźnika ustawi tę wartość na {stala}none{/stala}.

Jako że nie mamy zamiaru bawić się w {html}onmouseover=”"{/html} i {html}onmouseout=”"{/html} wewnątrz dokumentu HTML, należy je ustawić tuż po załadowaniu okienka przeglądarki z naszą stroną. Jak wielu z Was pewnie pomyślało, przyda nam się w tym celu zdarzenie {stala}onload{/stala}. Przyjmijmy też, że menu pokazywane będzie przez funkcję {stala}Pokaz{/stala}, a ukrywane przez {stala}Ukryj{/stala}.

Wykorzystamy też trzecią funkcję o nazwie {stala}Laduj{/stala}, która da znać dokumentowi, że naprowadzeni wskaźnika myszy na nagłówek Kategorie spowoduje rozwinięcie menu, a zwolnienie wskaźnika myszy – jego ukrycie. Szkielet skryptu przybierze więc następującą postać:

<script type=\"text/javascript\">
window.onload = Laduj;
function Pokaz()
{}
function Ukryj()
{}
function Laduj()
{}
</script>

Pora uzupełnić powyższy kod. Zaczniemy od funkcji {stala}Laduj{/stala}.

Funkcja getElementsByTagName

Musimy dostać się do poszczególnych elementów {html}

{/html}. Jak wiadomo, są one dziećmi {html}

Ostatnie poprawki

Finał

Internet Maker