Forma padajuće liste sa dodeljenim vezama
Forma padajuće liste predstavlja element koji dozvoljava posetiocima sajta da izaberu jednu ili više stavki iz padajućeg menija. Takve liste često koristimo kao dodatak ili gadžet na web stranici. Recimo da imate listu blogova ili sajtova (prijatelje sajta npr.) sa velikim brojem stavki. Kako ćete rešiti problem, a da ta lista ne zauzima previše prostora u nekoj od kolona? Jednostavno "spakujete" celu listu u jedan padajući meni...Evo dva različita primera (skripti) liste sa padajućim menijem. Prvi, gde je nakon odabira stavke sa liste potrebno kliknuti na dugme "Idi na stranicu" i drugi primer gde će ranije određena funkcija biti automatski izvršena ' posetilac će odmah diti preusmeren da web lokaciju koju ste prethodno odredili.
Sledi primer skripte forme sa padajućom listom, gde je nakon izbora stavke sa liste potrebno kliknuti na dugme "Idi na stranicu" da bi naredba tj. preusmeravanje bili izvršeni.
<p>Lista veza:</p>
<form action="">
<select id="setit" style="color: #0000FF" size="1">
<option value="">Izaberite stavku sa liste</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 1">Stranica br.1</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 2">Stranica br.2</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 3">Stranica br.3</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 4">Stranica br.4</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 5">Stranica br.5</option>
</select>
<input type="button" value="Idi na stranicu"
onclick="window.open(setit.options
[setit.selectedIndex].value)></form>
Praktično ovaj ptimer u nešto izmenjenoj formi sa dodatim vezama i predefinisanim nazivima stavki izgleda ovako:
Lista veza:
A sada primer forme sa padajućom listom gde se naredba automatski izvršava odmah po odabiru stavke sa liste.
<p>Lista veza:</p>
<form action="">
<select onchange="window.open(this.value,'','');">
<option value="">Izaberite stavku sa liste</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 1">Stranica br.1</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 2">Stranica br.2</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 3">Stranica br.3</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 4">Stranica br.4</option>
<option value="UNESITE VEZU DO WEB STRANICE BROJ 5">Stranica br.5</option>
</select>
</form>
Na kraju evo praktičnog primera, opet u nešto izmenjenoj formi sa dodatim vezama i nazivima stavki:
Lista veza:
Iz prethodnih primera verovatno ste primetili ralziku u boji stavki na listama. To je urađeno namerno kako bih uštedeo vaše vreme oko objašnjenja vezanog za stilizovanje liste. Dakle, kod prvog primera uočite u skripti ovaj deo:
style="color: #0000FF"
Heksadecimalnu vrednost koja označava kolor fonta stavki sa liste, promenite u neku drugu boju koja će se više uklopiti u dizajn vašeg sajta ili bloga.
Tag tj. oznaku <style> isto možete dodati skipti drugog primera, te tako stilizovati i tu listu.
Osim liste blogova ili sajtova, ovakva lista može poslužiti i kao navigacija na web stranici.
0 Comments »