Tutor.blog

Tutor.Blog je online priručnik na hrvatskom jeziku, za lakše snalaženje u HTML i CSS kodu. Ovdje možete naučiti kako učiniti svoj blog vizualno privlačnim, ali i osnove dizajniranja web stranica koje ne moraju biti nužno vezane uz blog.

Ovaj blog nije povezan sa uredništvom Blog.hr-a, te ne pruža podršku za tehničke probleme.

Besplatni predlošci za blog

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.


<form name="formular"><select name="izbornik"><option value="http://www.w3.org">W3C</option><option value="http://tutor.blog.hr">tutor.blog</option><option value="http://www.google.com">Google</option></select><input type="button" name="gumb" value="Kreni!" onClick="location=document.formular.izbornik.options[document.formular.izbornik.selectedIndex].value;"></form>

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 :)


<form name="formular"><select name="izbornik"><option value=none class="grupa">korisni linkovi</option><option value="http://www.w3.org">W3C</option><option value="http://www.google.com">Google</option><option value=none class="grupa">blogovi</option><option value="http://tutor.blog.hr">tutor.blog</option><option value="http://cwtam.inobscuro.com">cwtam</option><option value=none selected id="dno">linkovi</option></select><input type="button" name="gumb" value="Kreni!" onClick="location=document.formular.izbornik.options[document.formular.izbornik.selectedIndex].value;"> </form>

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 :)


form {
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?

03.04.2005. u 10:55

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Još niste uspjeli naći baš ono što vam treba? Pretražite cijeli Tutor.Blog:

Google

Sadržaj ovog bloga je autorski rad. © 2005-2007 Nela Dunato
Login
Google