Korak po korak vodiču
Da li je vaš navigacioni meni horizontalni red preko vrha ili vertikalni red u nizu, to je i dalje samo lista. Prilikom dizajniranja web navigacije, često je lako zaboraviti da je navigacioni meni samo proslavljena grupa veza. Ali ako programirate svoju navigaciju pomoću XHTML + CSS, možete kreirati meni koji je mali za preuzimanje (XHTML) i jednostavan za prilagođavanje (CSS).
Počinjemo
Da biste započeli dizajniranje liste za navigaciju, morate koristiti listu.
Možda je standardna neuređena lista koja je identifikovana kao navigacija:
Ako pažljivo pogledate HTML, primetićete da link "Home" takođe ima ID od vas. Ovo će vam omogućiti da kreirate meni koji identifikuje trenutnu lokaciju za svoje čitaoce. Čak i ako ne planirate takvu vrstu vizuelnog znaka na vašoj web lokaciji upravo sada, možete ih uključiti. Ako odlučite da kasnije dodate znake, imaćete manje kodiranja za pripremu vaše stranice.
Bez bilo kakvog CSS stila , ovaj XHTML meni izgleda kao standardna neuređena lista. Postoje metki i stavke liste su malo razdvojene. Zato što koristim linkove za držače , većina pretraživača neće prikazivati veze kao klikne (podvučene i plave). Ako postavite gore navedeni HTML u Web stranicu, vaša navigacija će izgledati ovako:
- Dom
- Proizvodi
- Usluge
- Kontaktiraj nas
Ovo je prilično dosadno i ne izgleda baš kao meni. Ali sa samo nekoliko CSS stilova dodanih na listu, možete kreirati meni koji vas čini ponosnim.
Vertikalni meni za navigaciju
Vertikalni navigacioni meni je veoma jednostavan za pisanje, jer prikazuje na isti način kao i normalna lista: gore i dolje.
Stavke liste se prikazuju vertikalno na stranici.
Kada menjam stilske menije, volim da započinjem spolja i radim. Ovim mislim da prvo stišem ul # navigaciju i onda prelazim na elemente li, a zatim veze itd. Dakle, za ovaj meni, prvo definišete širinu menija. Ovo će osigurati da čak i ako su stavke menija dugačke, neće preterati ostatak rasporeda niti prouzrokovati horizontalno skrolovanje.
ul # navigacija {širina: 12em; }
Kada nabavim širinu, mogu se igrati sa stavkama na listi. Ovo mi omogućava da postavim stvari poput (da se otarasim metaka), boje pozadine, granice, poravnavanje teksta i margine.
ul # navigation li {
lista-stil: nema;
pozadina: # 039;
granični-top: solid 1px # 039;
tekstualno poravnanje: lijevo;
marža: 0;
}
Kada postavite osnove za stavke liste koje možete započeti reprodukovati kako se meni prikazuje u oblasti s linijama. Prvi stil UL # navigacije LI A, a zatim A: link, A: posjetio, A: lebdeći i A: aktivan (ako ih želite). Za linkove, volim da link postavim blok elementom (umesto podrazumevanom on-line). Ovo ih tera da preuzmu čitav prostor LI-a više se ponašaju kao paragraf, što ih čini lakšim za stil kao menijske dugmadi. Druga stvar koju uvek radim je ukloniti podvigu (tekstualna dekoracija: nema;), jer to čini da dugmad više izgledaju kao dugmad za mene.
Naravno, vaš dizajn može biti drugačiji.
ul # navigacija li {
prikaz: blok;
tekst-dekoracija: nema;
padding: .25em;
granična dužina: solid 1px # 39f;
granična desna: čvrsta 1px # 39f;
}
Obratite pažnju da je sa ekranom: blok; postaviti na linkove, čitava kutija stavke menija može se kliknuti, a ne samo slova. Ovo je takođe dobro za upotrebljivost. Obavezno postavite boje veze (link, posjećeni, lebdeći i aktivni) ako želite da se oni razlikuju od standardne plave, crvene i ljubičaste.
a: link, a: posjetili {color: #fff; }
a: hover, a: aktivan {color: # 000; }
Takođe mi je drago da navedem stanje lebdenja malo više pažnje promenom boje pozadine.
a: hover {background-color: #fff; }
Ako želite više primjera vertikalnih menija, konsultujte spisak ispod.
- Styled Vertical Menu
- Osnovni Vertikalni Menu Template
- Stilisan vertikalni meni sa vama je ovde
- Osnovni Vertikalni Template Menu sa Vama je ovdje
Horizontalni meni za navigaciju
Kreiranje horizontalnih menija za navigaciju je malo teže od menija vertikalne navigacije, jer morate izbalansirati činjenicu da HTML liste preferiraju da se prikazuju vertikalno. Kao i kod horizontalnog menija, prvo kreirajte listu navigacionih menija :
Da biste kreirali horizontalni meni, radite isto kao i kod vertikalnog menija. Počnite sa spoljašnjom i radite. Pošto želim da moja navigacija počne u levom uglu, postavila sam je sa 0 levom marginom i podlogom i plivala je levo. Takođe bi trebalo da imate naviku da postavite širinu tako da vaš meni ne uzima više ili manje prostora nego što nameravate. Za horizontalne menije ovo je obično puna širina dizajna. Takođe sam dodao boju pozadine na čitavu listu kako bi je olakšao čitanje.
ul # navigacija {
float: left;
marža: 0;
padding: 0;
širina: 100%;
pozadina: # 039;
}
Ali tajna horizontalnog navigacionog menija je u stavkama liste. Elementi liste su obično elementi blokova, što znači da će im biti postavljena nova linija pre i posle svake od njih. Prebacivanjem displeja iz bloka u inline, elemente liste primorate da se poredjuju pored horizontalne.
ul # navigation li {display: inline; }
Povezan sam sa linkovima upravo kao što sam ih tretirao u meniju vertikalne navigacije, sa istim bojama i dekoracijom teksta. Dodao sam gornju granicu da objasnim tasterima kada se premeštaju. Jedino što sam uklonio bio je ekran: blok; jer će to ponovo staviti nove linije i uništiti horizontalni meni.
ul # navigacija li {
tekst-dekoracija: nema;
padding: .25em 1em;
granična dužina: solid 1px # 39f;
border-top: solid 1px # 39f;
granična desna: čvrsta 1px # 39f;
}
a: link, a: posjetili {color: #fff; }
ul # navigacija li: hover {
pozadina: #fff;
boja: # 000;
}
Vi ste ovde informacije o lokaciji
Još jedan aspekt HTML-a je vašeg identiteta. Ako želite da izmenite svoj meni da biste prikazali trenutnu lokaciju vaših korisnika, jednostavno koristite ovaj ID da biste definisali drugu boju pozadine ili drugi stil. Pomerite taj ID atribut na ispravnu stavku menija na drugim stranicama tako da trenutna stranica uvek bude označena.
ul # navigation li # yourehere a {background-color: # 09f; }
Ako stavite ove stilove zajedno na svoju stranicu, možete kreirati horizontalnu ili vertikalnu liniju menija koja radi sa vašom stranom, ali je brza za preuzimanje i vrlo lako ažurirati u budućnosti. Korišćenje XHTML + CSS pretvara vaše liste u veoma moćan alat za dizajn.
Ako želite više primjera horizontalnih menija, potražite sljedeće.
- Stilski horizontalni meni
- Osnovni šablon horizontalnog izbornika
- Stilirani horizontalni meni sa vama je ovde
- Osnovni obrazac horizontalnog menija sa vama je ovde