Korak-po-korak vodič
Bez obzira je li vaš navigacijski izbornik horizontalni redak na vrhu ili okomiti redak prema dolje, to je još uvijek samo popis. Prilikom izrade internetske navigacije često je lako zaboraviti da je izbornik za navigaciju samo proslavljena skupina veza. No ako programirate navigaciju pomoću XHTML + CSS, možete stvoriti izbornik koji je malen za preuzimanje (XHTML) i jednostavan za prilagodbu (CSS).
Početak rada
Za početak izrade popisa za navigaciju morate koristiti popis.
On može biti standardni neuredan popis koji je prepoznat kao navigacija:
Ako pomno pogledate HTML, primijetit ćete da veza "Početna" također ima ID od vas. To će vam omogućiti da stvorite izbornik koji identificira trenutnu lokaciju vaših čitatelja. Čak i ako ne planirate da trenutno imate vizualni znak na vašoj web-lokaciji, možete uključiti te podatke. Ako odlučite kasnije dodati znak, imat ćete manje kodiranja za pripremu svoje web lokacije.
Bez ikakvog CSS stylinga , ovaj XHTML izbornik izgleda kao standardni neuredan popis. Postoje meci i stavci s popisa su blago razvedeni. Budući da upotrebljavam veze rezervnih mjesta , većina preglednika neće prikazivati veze kao kliknuti (podcrtano i plavo). Ako zalijepite gornji HTML na web stranicu, navigacija će izgledati ovako:
- Dom
- proizvodi
- usluge
- Kontaktirajte nas
Ovo je prilično dosadno i ne izgleda baš kao meni. Ali s nekoliko CSS stilova dodanih na popis, možete stvoriti izbornik koji vas ponosi.
Okomiti izbornik za navigaciju
Okomito navigacijski izbornik vrlo je jednostavan za pisanje jer se prikazuje na isti način kao i normalan popis: gore i dolje.
Stavke popisa prikazuju se okomito niz stranicu.
Kada dizajniramo izbornike, volim se započeti izvana i raditi. Ovime mislim da prvo uređujem ul # navigaciju, a zatim premjestim na elemente li, a zatim veze, itd. Dakle za ovaj izbornik, najprije definirate širinu izbornika. To će osigurati da čak i ako su stavke izbornika dugačke, neće gurati ostatak izgleda ili uzrokovati horizontalno pomicanje.
ul # navigation {width: 12em; }
Nakon što sam dobio set širine, mogu se igrati sa stavkama popisa. To mi omogućuje da postavim stvari kao što su: (da biste dobili osloboditi od metaka), pozadinske boje, granice, poravnanje teksta i margine.
ul # navigation li {
popis stila: none;
boja pozadine: # 039;
granični vrh: čvrsta 1px # 039;
tekstno poravnanje: lijevo;
margina: 0;
}
Nakon što postavite osnove za stavke popisa, možete početi igrati s načinom na koji izbornik izgleda u području veza. Prvi stil UL # navigaciju LI A, a zatim A: vezu, A: posjetili, A: zadržite pokazivač miša i A: aktivno (ako ih želite). Za veze volim povezivanje blok elementa (a ne zadani linijski). To ih prisiljava da zauzimaju cijeli prostor LI-a i djeluju više kao stavak, što ih čini jednostavnijim za stil kao tipke izbornika. Druga stvar koju uvijek radim je ukloniti podcrtavanje (text-decoration: none;), jer to čini gumbe izgledaju više poput gumba za mene.
Naravno, vaš dizajn može biti drugačiji.
ul # navigation li a {
prikaz: blok;
tekst ukrašavanja: none;
padding: .25em;
granični dno: čvrsta 1px # 39f;
granica-desno: čvrsta 1px # 39f;
}
Primjetite da je prikaz: blok; postaviti na veze, cijeli okvir stavke izbornika je moguće kliknuti, a ne samo slova. Ovo je također dobro za upotrebljivost. Svakako postavite boje veze (vezu, posjećivanje, zadržite pokazivač miša i aktivne) ako želite da se razlikuju od zadane plave, crvene i ljubičaste boje.
a: link, a: posjetio {color: #fff; }
a: zadržite pokazivač miša, a: active {color: # 000; }
Također, želim dati malo više pozornosti promjenom pozadinske boje.
a: lebdjeti {background-color: #fff; }
Ako želite više primjera okomitih izbornika, pogledajte popis u nastavku.
- Stilirani okomiti izbornik
- Osnovni vertikalni predložak izbornika
- Stilirani okomiti izbornik s Vama Ovdje
- Predložak osnovnog vertikalnog izbornika s vama je ovdje
Vodoravni izbornik za navigaciju
Izrada vodoravnih navigacijskih izbornika malo je teža od vertikalnih navigacijskih izbornika jer morate neutralizirati činjenicu da HTML popisi više vole prikazivati okomito. Kao i kod vodoravnog izbornika, najprije izradite popis navigacijskih izbornika :
Da biste stvorili vodoravni izbornik, radite isto kao i kod vertikalnog izbornika. Počnite s vanjskim i radite. Budući da želim da se moja navigacija započne u lijevom kutu, postavljam je s lijevom marginom i padom, a ja ga plutaš lijevom. Također biste trebali naviknuti na postavljanje širine tako da izbornik ne zauzima više ili manje prostora nego što namjeravate. Za horizontalne izbornike to je obično puna širina dizajna. Također sam dodao boju pozadine na cijeli popis kako bih lakše pročitala.
ul # navigation {
plutaju: lijevo;
margina: 0;
padding: 0;
širina: 100%;
boja pozadine: # 039;
}
No tajna vodoravnog navigacijskog izbornika nalazi se u stavkama popisa. Stavke popisa obično su blok elementi, što znači da će imati novu liniju postavljenu prije i poslije svakog od njih. Prebacivanjem zaslona od bloka do inline, prisiljavate elemente popisa da se horizontalno poredaju jedna uz drugu.
ul # navigation li {display: inline; }
Obradio sam veze baš kao što sam ih obrađivao u vertikalnom navigacijskom izborniku, s istim bojama i ukrasom teksta. Dodala sam gornju granicu za određivanje gumba kada su lebdjeti. Jedino što sam uklonio bio je prikaz: blok; jer će to vratiti nove linije i uništiti vodoravni izbornik.
ul # navigation li a {
tekst ukrašavanja: none;
popunjavanje: .25em 1em;
granični dno: čvrsta 1px # 39f;
granični vrh: čvrsta 1px # 39f;
granica-desno: čvrsta 1px # 39f;
}
a: link, a: posjetio {color: #fff; }
ul # navigation li a: zadržite pokazivač miša {
boja pozadine: #fff;
boja: # 000;
}
Ovdje ste informacije o lokaciji
Drugi aspekt HTML-a je identifikacija vas uopće. Ako želite izmijeniti svoj izbornik kako biste naznačili trenutačnu lokaciju svojih korisnika, jednostavno upotrijebite taj ID kako biste definirali različitu boju pozadine ili drugi stil. Premjestite taj ID atribut na ispravnu stavku izbornika na drugim stranicama tako da je trenutna stranica uvijek istaknuta.
ul # navođenje li youerehere a {background-color: # 09f; }
Ako stavite ove stilove na svoju stranicu, možete izraditi vodoravnu ili okomitu traku izbornika koja funkcionira s vašom web lokacijom, ali je brzo preuzeta i vrlo jednostavno ažurirati u budućnosti. Korištenje XHTML + CSS pretvara vaše popise u vrlo moćan alat za dizajn.
Ako želite više primjera horizontalnih izbornika, konzultirajte sljedeće.
- Stilirani vodoravni izbornik
- Temeljni vodoravni izbornik
- Stilirani vodoravni izbornik s vama su ovdje
- Temeljni vodoravni izbornik s vama je ovdje