Bez obzira je li navigacijski izbornik vaše web stranice vodoravni red preko vrha ili vertikalni red dolje sa strane, to je samo popis. Prilikom projektiranja web navigacija, navigacijski izbornik je grupa veza. Kada programirate navigaciju pomoću XHTML + CSS, možete stvoriti izbornik koji je mali za preuzimanje (XHTML) i jednostavan za prilagodbu (CSS).
Početak rada
Da biste dizajnirali popis za navigaciju, morate upotrijebiti popis. To je možda standardni neuređeni popis koji je identificiran kao navigacija. Na primjer:
- Dom
- Proizvodi
- Usluge
- Kontaktirajte nas
Kada se gleda HTML, veza Početna ima ID.
ti si ovdje
To vam omogućuje stvaranje izbornika koji identificira trenutno mjesto za vaše čitatelje. Čak i ako trenutno ne planirate imati takvu vrstu vizualnog znaka na svojoj web lokaciji, možete uključiti te podatke. Ako odlučite dodati znak kasnije, imat ćete manje kodiranja za pripremu web stranice.
Bez ikakvih CSS stil, ovaj XHTML izbornik izgleda kao standardni neuređeni popis. Postoje meci, a stavke na popisu blago su uvučene. Prilikom korištenja
veze rezerviranih mjesta, većina preglednika ne prikazuje veze kao klikljive (podcrtano i plavo). Kada zalijepite HTML na web stranicu, navigacija izgleda ovako:- Dom
- Proizvodi
- Usluge
- Kontaktirajte nas
Ovo ne sliči na jelovnik. Međutim, s nekoliko CSS stilova dodanih na popis, možete stvoriti izbornik koji vas čini ponosnima.
Ako želite još primjera vertikalnih izbornika, pretražite sljedeće:
- Stilizirani okomiti izbornik
- Osnovni predložak okomitog izbornika
- Stilizirani vertikalni izbornik s You Are Here
- Osnovni predložak okomitog izbornika s You Are Here
Izbornik okomite navigacije
Izbornik okomite navigacije lako je napisati jer se prikazuje na isti način kao i uobičajeni popis: gore i dolje. Stavke popisa prikazuju se okomito dolje na stranici.
Pri oblikovanju jelovnika započnite s vanjske strane i radite unutra. Prvo oblikujte navigaciju:
ul # navigacija
Zatim prijeđite na elemente i veze. Prvo definirajte širinu izbornika. To osigurava da ako su stavke izbornika dugačke, stavke neće potisnuti ostatak izgleda ili izazvati vodoravno pomicanje.
ul # navigation {širina: 12em; }
Nakon što postavite širinu, radite na stavkama popisa. To vam omogućuje postavljanje stvari poput boja pozadine, obruba, poravnanja teksta i margina.
ul # navigacija li {
stil popisa: nema;
boja pozadine: # 039;
rub-vrh: čvrst 1px # 039;
poravnanje teksta: lijevo;
marža: 0;
}
Nakon što postavite osnove za stavke popisa, poradite na tome kako izgleda izbornik u području veza. Prvo oblikovanje navigacije:
UL # navigacija LI A
Zatim oblikujte sljedeće:
Poveznica
O: posjećeno
O: lebdite
O: aktivno
Za veze neka veze budu blok-element (a ne zadani redoslijed). To prisiljava veze da zauzimaju čitav prostor LI-a i djeluju poput odlomka, čineći veze lakšim za oblikovanje kao tipke izbornika. Zatim uklonite sljedeće:
podcrtavanje, ukras teksta: nema; kao
Zbog toga tipke izgledaju više poput gumba. Vaš dizajn može biti drugačiji.
ul # navigacija li a {
prikaz: blok;
ukras teksta: nijedan;
podstava: .25em;
obrub-dno: čvrsto 1px # 39f;
granica-desno: solidno 1px # 39f;
}
Uz prikaz: blok; postavljen na vezama, može se kliknuti čitav okvir stavke izbornika, ne samo slova. To je također dobro za upotrebljivost. Postavite boje veze (veza, posjeta, zadržavanje i aktiviranje) ako želite da se veze razlikuju od zadane plave, crvene i ljubičaste.
a: veza, a: posjećeno {color: #fff; }
a: hover, a: active {boja: # 000; }
Stanju lebdenja možete dati malo pažnje i promjenom boje pozadine.
a: hover {background-color: #fff; }
Izbornik vodoravne navigacije
Stvaranje vodoravnih navigacijskih izbornika nešto je teže od vertikalnih navigacijskih izbornika jer morate nadoknaditi činjenicu da se HTML popisi radije prikazuju okomito. Kao i kod vodoravnog izbornika, izradite popis navigacijskih izbornika:
- Dom
- Proizvodi
- Usluge
- Kontaktirajte nas
Da biste stvorili vodoravni izbornik, radite isto kao i s okomitim izbornikom. Počnite s vanjskim dijelom i radite u. Da biste pokrenuli navigaciju u lijevom kutu, podesite je s 0 lijevog ruba i popunjavanja i pomaknite je ulijevo.
Steknite naviku postavljanja širine tako da vaš izbornik ne zauzima više ili manje prostora nego što namjeravate. Za vodoravne izbornike to je obično puna širina dizajna. Možete i dodati boja pozadine na popis radi lakšeg čitanja.
ul # navigation {
plutaju: lijevo;
marža: 0;
popunjavanje: 0;
širina: 100%;
boja pozadine: # 039;
}
Tajna vodoravnog navigacijskog izbornika je u stavkama popisa. Stavke popisa obično su blok elementi, što znači da te stavke imaju novi redak smješten prije i poslije svakog. Prebacivanjem prikaza iz bloka u red, prisiljavate elemente popisa da se vodoravno poredaju jedan pored drugog.
ul # navigacija li {prikaz: inline; }
Tretirajte veze točno poput vertikalnog navigacijskog izbornika, s istim bojama i ukrasom teksta. Dodajte gornju ivicu da biste razgraničili gumbe kada korisnik zadrži pokazivač iznad gumba. Zatim uklonite prikaz: blok; jer to vraća nove retke i uništava vodoravni izbornik.
Ovdje ste Informacije o lokaciji
Sljedeći aspekt HTML-a je ovaj identifikator:
ti si ovdje
Ako želite izmijeniti svoj izbornik tako da pokazuje trenutno mjesto vaših korisnika, upotrijebite ovaj ID za definiranje druge boje pozadine ili drugog stila. Premjestite taj ID atributa u ispravnu stavku izbornika na drugim stranicama tako da je trenutna stranica uvijek istaknuta.
Ako na svojoj stranici sastavite ove stilove, možete stvoriti vodoravnu ili okomitu traku izbornika koja radi s vašom web stranicom i brza je za preuzimanje i laka za ažuriranje. Korištenje XHTML + CSS pretvara vaše popise u moćan alat za dizajn.
Ako želite još primjera vodoravnih izbornika, na webu potražite sljedeće:
- Stilizirani vodoravni izbornik
- Osnovni vodoravni predložak izbornika
- Stilizirani vodoravni izbornik s You Are Here
- Osnovni vodoravni predložak izbornika s You Are Here