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
ti si ovdje, 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.
Kad dizajniramo izbornike, volim se započeti izvana i raditi. Ovime mislim da sam prvo oblikovao
ul # navigaciju i zatim se prebacite na
li elementi, 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. Prvo je stil UL # navigacija LI Ai onda Poveznica, O: posjetio, A: hover, i A: aktivna (ako ih želite). Za veze volim povezivanje blok elementa (a ne zadani linijski). To ih prisiljava da preuzmu cijeli prostor LII oni djeluju više kao stavak, što ih čini lakšom stilizirati kao gumbe izbornika. Druga stvar koju uvijek radim je ukloniti podcrtanu ( tekst ukrašavanja: none;), jer to čini gumbe izgledaju slično gumama 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;} Primijetite da s 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. 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 iz blok do u redu, 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. Jedina stvar uklonjena 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;} Drugi aspekt HTML-a je identifikator ti si ovdje, Ako želite izmijeniti svoj izbornik kako biste naznačili trenutačnu lokaciju svojih korisnika, jednostavno upotrijebite ovaj iskaznica da biste definirali različitu boju pozadine ili neki drugi stil. Premjestite taj atribut iskaznica 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.
Vodoravni izbornik za navigaciju
Ovdje ste informacije o lokaciji
