Vodič po korakih
Ali je vaš navigacijski meni vodoravna vrstica na vrhu ali navpična vrstica navzdol ob strani, je še vedno le seznam. Pri oblikovanju spletne navigacije je pogosto težko pozabiti, da je navigacijski meni le častna skupina povezav. Toda, če programirate svojo navigacijo z uporabo XHTML + CSS, lahko ustvarite meni, ki je majhen za prenos (XHTML) in ga je enostavno prilagoditi (CSS).
Začetek
Če želite začeti s pripravo seznama za navigacijo, morate uporabiti seznam.
Lahko je standardni neurejen seznam, ki je bil opredeljen kot navigacija:
Če natančno pogledate HTML, boste opazili, da ima povezava »Domača« tudi ID od vas. To vam bo omogočilo, da ustvarite meni, ki označuje trenutno lokacijo vaših bralcev. Tudi če ne nameravate zdaj imeti takšne vizualne podobe na vaši spletni strani, jih lahko vključite. Če se odločite, da boste kasneje dodali beležko, boste imeli manj kodiranja za pripravo vaše spletne strani.
Brez oblikovanja CSS , ta meni XHTML izgleda kot standardni neurejen seznam. Obstajajo oznake in elementi seznama so nekoliko razčiščeni. Ker uporabljam povezave z vzdevkom , večina brskalnikov ne bo prikazala povezav, ki bi jih bilo mogoče klikniti (podčrtano in modro). Če v zgornji HTML prilepite na spletno stran, bo vaša navigacija videti takole:
- Domov
- Izdelki
- Storitve
- Kontaktiraj nas
To je precej dolgočasno in ne izgleda podobno kot meni. Toda s samo nekaj slogov CSS, dodanih na seznam, lahko ustvarite meni, ki vas ponudi.
Navpični navigacijski meni
Navpični navigacijski meni je zelo enostaven za pisanje, ker se prikaže na enak način kot navaden seznam: gor in dol.
Elementi seznama se prikazujejo navpično po strani.
Ko stojim po menijih, rad bi začel na zunanji strani in delal. S tem mislim, da najprej vtipim ul # navigacijo in nato premaknem na elemente li in nato povezave, itd. Torej za ta meni, najprej določite širino menija. To bo zagotovilo, da tudi če so elementi menija dolgi, ne bodo potisnili preostale postavitve niti povzročili horizontalnega pomika.
ul # navigacija {širina: 12em; }
Ko dobim nastavljeno širino, lahko igram z elementi seznama. To mi omogoča, da nastavim stvari, kot so (znebiti se oznak), barve ozadja, meja, poravnave besedila in robov.
ul # navigacija li {
slog seznama: nič;
barva ozadja: # 039;
border-top: solid 1px # 039;
poravnava besedila: levo;
marža: 0;
}
Ko nastavite osnove za elemente seznama, ki jih lahko začnete predvajati, s tem, kako se meni prikaže na področju povezav. Najprej slišite UL # navigacijo LI A in nato povezavo A: A: obiskali, A: lebdenje in A: aktivno (če jih želite). Za povezave želim povezave povezati z blokovnim elementom (namesto s privzetim v spletu). To jih prisili, da prevzamejo celoten prostor LI-in delujejo bolj kot odstavek, zaradi česar so lažje oblikovati kot menijske gumbe. Druga stvar, ki jo vedno naredim, je odstraniti podčrtano (tekst-dekoracija: nič;), ker to naredi gumbe bolj kot gumbe.
Seveda pa je vaš design lahko drugačen.
ul # navigacija li {
prikaz: blok;
tekst-dekoracija: nič;
oblazinjenje: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Upoštevajte, da je z zaslonom: blok; nastavljeno na povezavah, se lahko celotno polje elementa menija klikne, ne samo črk. To je tudi dobro za uporabnost. Poskrbite, da nastavite barve povezave (povezava, obiskane, lebdenje in aktivne), če želite, da se razlikujejo od privzetih modre, rdeče in vijolično.
a: link, a: obiskali {color: #fff; }
a: lebdenje, a: aktivna {barva: # 000; }
Želim tudi dati lebdi državi malo več pozornosti s spremembo barve ozadja.
a: hover {background-color: #fff; }
Če želite več primerov navpičnih menijev, se posvetujte s spodnjim seznamom.
- Styled Navpični meni
- Predloga osnovne navpične mize
- Styled Vertical Menu s tabo je tukaj
- Osnovna vertikalna predloga z menoj ste tukaj
Vodoravni navigacijski meni
Ustvarjanje vodoravnih navigacijskih menijev je nekoliko težje od navpičnih navigacijskih menijev, ker morate izravnati dejstvo, da se seznami HTML raje prikazujejo navpično. Kot pri vodoravnem meniju najprej ustvarite seznam navigacijskih menijev :
Če želite ustvariti vodoravni meni, delajte enako kot v navpičnem meniju. Začnite z zunanjim delom in delajte. Ker želim, da se moja navigacija začne v levem kotu, jo nastavim z 0 levim robom in oblazinjenjem, in jo plavam na levo. Prav tako bi morali imeti navado nastaviti širino, tako da vaš meni ne bo zajel manj ali manj prostora, kot ga nameravate. Za vodoravne menije je to običajno celotna širina zasnove. Prav tako sem dodal barvo ozadja na celoten seznam, da ga lažje berem.
ul # navigacija {
float: levo;
marža: 0;
oblazinjenje: 0;
širina: 100%;
barva ozadja: # 039;
}
Toda skrivnost horizontalnega navigacijskega menija je v seznamu. Elementi seznama so običajno blokovni elementi, kar pomeni, da bodo imeli novo linijo pred in po vsakem. S preklapljanjem zaslona iz bloka v vrstico, elemente seznama naraščate tako, da se med seboj ravnajo horizontalno.
ul # navigacija li {display: inline; }
Povezave sem ravno tako ravnala, kot da sem jih obravnavala v meniju navpične navigacije, z enakimi barvami in tekstualnimi dekoracijami. Dodal sem zgornji rob, da sem določil gumbe, ko so bili premaknjeni. Edino, kar sem odstranil, je bil prikaz: blok; saj bo to vrnilo nove črte in uničilo vodoravni meni.
ul # navigacija li {
tekst-dekoracija: nič;
oblazinjenje: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
border-right: solid 1px # 39f;
}
a: link, a: obiskali {color: #fff; }
ul # navigacija li: hover {
barva ozadja: #fff;
barva: # 000;
}
Tukaj ste informacije o lokaciji
Še en vidik HTML je identifikacija vašega mesta. Če želite spremeniti svoj meni, da označite trenutno lokacijo vaših uporabnikov, preprosto uporabite ta ID, da določite drugo barvo ozadja ali drug slog. Premakni ta ID atribut na ustrezno točko menija na drugih straneh, tako da je trenutna stran vedno označena.
ul # navigacija li # yourehere {{background-color: # 09f; }
Če te sloge dodate skupaj na svojo stran, lahko ustvarite vodoravno ali navpično menijsko vrstico, ki deluje z vašo spletno stranjo, vendar jo hitro prenesete in jo boste v prihodnje preprosto posodobili. Uporaba XHTML + CSS pretvori vaše sezname v zelo zmogljivo orodje za oblikovanje.
Če želite več primerov horizontalnih menijev, preberite naslednje.
- Styled horizontalni meni
- Predloga osnovne vodoravne menije
- Styled horizontalni meni s tabo je tukaj
- Predloga osnovne horizontalne predloge z vami