Izbornik sa padajućim popisom

Mnogi veliki portali imaju padajući izbornik sa popisom najvažnijih stranica i usluga na portalu. Ovaj popis najčešće radi na način da vi odaberete naziv stranice i jednostavna JavaScript funkcija vas odvede na odabranu stranicu. Postoji i drugi način, a taj je da vi najprije odaberete željenu stranicu te kliknete na dugme koje se nalazi pokraj popisa. Vi odaberite onu koju najviše želite ili koja vam se slaže sa stranicom. Kao i svaki odabir i jedan i drugi imaju svoje prednosti i mane i ako se ne možete odlučiti koji odabrati mi vam preporučujemo rješenje sa dodatnim dugmetom.

Izbornik bez dodatnog dugmeta

Najprije trebamo napraviti HTML kod sa popisom stranica koristeći <select> tag. Ovaj kod stavite unutar body dijela HTML stranice.


<form name="navigacija">

<select name="stranice" onChange="OtvoriStranicu();">
<option selected>Odaberite stranicu</option>
<option value="http://www.osvemu.com/index.php?str=pocetna">
Pocetna
</option>
<option value="http://www.osvemu.com/index.php?str=kontakt">
Kontakt
</option>

<!--Dodajte jos stranica koliko vam treba -->
</select>
</form>





Vidimo sada da select poziva funkciju OtvoriStranicu() čim se promijeni vrijednost polja odnosno čim kliknemo na neku vrijednost. Sada ide kod za ovu funkciju i ovaj kod naravno ide u head dio HTML stranice.


<script language="JavaScript">

function OtvoriStranicu()
{
vrijednost = document.navigacija.stranice.value;

if (vrijednost != null)
{
window.location.href = vrijednost;
}

}

</script>




Izbornik sa dodatnim dugmetom

Sada moramo napraviti takvu formu da omogući odabir lokacije i onda sačeka klik na dugme da bi odvela korisnika na odabranu lokaciju. Za ovo ćemo koristiti istu funkciju u JavaScript-u, samo će forma imati dodatno dugme.


<form name="navigacija">

<select name="stranice">
<option selected>Odaberite stranicu</option>
<option value="http://www.osvemu.com/index.php?str=pocetna">
Pocetna
</option>
<option value="http://www.osvemu.com/index.php?str=kontakt">
Kontakt
</option>

<!--Dodajte jos stranica koliko vam treba -->
</select>

<input type="button" name="Otvori" value ="Otvori"
onclick="OtvoriStranicu();">

</form>