Padajući izbornik
Evo zgodnog rješenja kada imate poveći broj linkova koji vam zauzimaju mjesto na blogu, a ne zahtijevaju dodatan opis. Možete ga koristiti za linkanje svoje arhive postova, ili ako pratite mnogo blogova... Da bi izbornik radio, korisnik mora imati uključen JavaScript, a to velika većina korisnika ima.
Pojašnjenje koda: Imamo formu imena formular. U njoj se nalazi izbornik (selector) koji smo nazvali izbornik. Nižemo vrijednosti u izborniku, tako da se između tagova < option > i < /option > nalazi ime koje će biti prikazano, a u value="" upišemo link do kojeg će voditi ta opcija.
Klikom da gumb Kreni! pokrenuti će se JavaScript i u prozoru će se otvoriti nova stranica.
Evo izbornika prikazanog gornjim kodom:
No, to se sve može i ljepše i bolje, pa onaj tko je za malo naprednog oblikovanja, neka čita dalje :)
Primijetite da opcije korisni linkovi, blogovi i linkovi imaju value=none što znači da se njihovim odabiranjem neće dogoditi ništa. Opcija linkovi je označena sa selected što znači da će pri učitavanju izbornika ta opcija biti predložena u prozorčiću izbornika. Opcijama korisni linkovi i blogovi dala sam klasu grupa kako bi im u CSS-u dala posebno oblikovanje. Tako možemo prividno podijeliti izbornik u više grupa linkova. Opciji linkovi sam dala id, također kako joj mogla pristupiti CSS-om. Vidjet ćete kako.
Naravno, evo i CSS-a. Mijenjanjem vrijednosti boja, veličina i fontova napravite svoj originalni izbornik :)
margin: 10px;
}
input, select {
border: #000000 solid;
border-width: 1px 1px 1px 1px;
}
input {
margin-left: 10px;
background: #CCADAD;
}
select {
background: #CCADAD;
}
option {
font-family: "tahoma", verdana;
font-size: 11px;
background: #CCADAD;
}
.grupa {
font-weight: bold;
text-decoration: underline;
font-style: italic;
font-size: 12px;
padding-top: 2px;
}
#dno {
display: none;
}
Primjećujete li kako nakon otvaranja izbornika opcija "linkovi" nestane? To je napravljeno pomoću display: none u CSS-u. Klasa grupa ima oblikovanje kako bi se razlikovala od pravih linkova.
Evo, to je bilo to :) Jednostavno, zar ne?