Ne glede na to, ali je navigacijski meni vašega spletnega mesta vodoravna vrstica na vrhu ali navpična vrstica ob strani, je le seznam. Pri oblikovanju spletna navigacija, navigacijski meni je skupina povezav. Ko programirate navigacijo s pomočjo XHTML + CSS, lahko ustvarite meni, ki je majhen za prenos (XHTML) in enostaven za prilagajanje (CSS).
Kako začeti
Če želite oblikovati seznam za navigacijo, morate uporabiti seznam. To je lahko standardni neurejeni seznam, ki je bil označen kot navigacija. Na primer:
- Domov
- Izdelki
- Storitve
- Kontaktiraj nas
Ko gledamo HTML, ima povezava Domov ID.
tukaj ste
To vam omogoča, da ustvarite meni, ki določa trenutno lokacijo vaših bralcev. Tudi če na vašem spletnem mestu trenutno ne nameravate imeti take vrste vizualnega znaka, lahko te podatke vključite. Če se odločite za dodajanje iztočnice pozneje, boste imeli manj kodiranja za pripravo spletnega mesta.
Brez kakršnega koli CSS oblikovanje, ta meni XHTML izgleda kot standardni neurejeni seznam. Obstajajo krogle, elementi na seznamu pa so rahlo zamaknjeni. Pri uporabi
nadomestne povezave, večina brskalnikov povezav ne prikaže kot klikljivih (podčrtano in modro). Ko HTML prilepite na spletno stran, je navigacija videti tako:- Domov
- Izdelki
- Storitve
- Kontaktiraj nas
To ni videti kot meni. Z nekaj stili CSS, ki so dodani na seznam, lahko ustvarite meni, ki vas bo ponosen.
Če želite več primerov navpičnih menijev, poiščite naslednje:
- Stiliziran navpični meni
- Osnovna navpična predloga menija
- Stiliziran navpični meni z You Are Here
- Osnovna navpična predloga menija z You Are Here
Meni za navpično krmarjenje
Navpični meni za krmarjenje je enostavno napisati, ker se prikaže na enak način kot običajni seznam: gor in dol. Elementi seznama se prikažejo navpično navzdol po strani.
Ko oblikujete menije, začnite od zunaj in delajte noter. Najprej oblikujte navigacijo:
ul # navigacija
Nato se premaknite na elemente in povezave. Najprej določite širino menija. To zagotavlja, da če so elementi menija dolgi, elementi ne bodo potisnili preostalega dela postavitve ali povzročili vodoravnega drsenja.
ul # navigacija {širina: 12em; }
Ko nastavite širino, obdelajte elemente seznama. To vam omogoča, da nastavite stvari, kot so barve ozadja, obrobe, poravnava besedila in robovi.
ul # navigacija li {
slog seznama: noben;
barva ozadja: # 039;
border-top: solid 1px # 039;
poravnava besedila: levo;
marža: 0;
}
Ko nastavite osnove za elemente seznama, poglejte, kako je videti meni v območju s povezavami. Prvi slog navigacije:
UL # navigacija LI A
Nato oblikujte naslednje:
O: povezava
O: obiskano
O: lebdite
O: aktivno
Za povezave naj bodo povezave blok (in ne privzeti vrstni red). To prisili povezave, da zavzamejo celoten prostor LI in delujejo kot odstavek, kar olajša oblikovanje povezav kot gumbi menija. Nato odstranite naslednje:
podčrtaj, okrasitev besedila: nobena; kot
Zaradi tega so gumbi bolj podobni gumbom. Vaš dizajn je lahko drugačen.
ul # navigacija li a {
zaslon: blok;
dekoracija besedila: nobena;
oblazinjenje: .25em;
rob-dno: polno 1px # 39f;
meja-desno: solid 1px # 39f;
}
Z zaslon: blok; nastavljeno na povezavah, lahko kliknete celotno polje menija, ne samo črke. To je dobro tudi za uporabnost. Nastavite barve povezav (povezava, obiskana, lebdeča in aktivna), če želite, da se povezave razlikujejo od privzete modre, rdeče in vijolične.
a: povezava, a: obiskano {color: #fff; }
a: hover, a: active {barva: # 000; }
Stanju lebdenja lahko posvetite tudi nekaj pozornosti, tako da spremenite barvo ozadja.
a: hover {background-color: #fff; }
Meni vodoravne navigacije
Ustvarjanje vodoravnih navigacijskih menijev je nekoliko težje kot vertikalnih navigacijskih menijev, ker morate nadomestiti dejstvo, da se seznami HTML raje prikazujejo navpično. Tako kot pri vodoravnem meniju ustvarite tudi seznam menijev za krmarjenje:
- Domov
- Izdelki
- Storitve
- Kontaktiraj nas
Če želite ustvariti vodoravni meni, delajte enako kot pri navpičnem meniju. Začnite z zunanjostjo in delajte noter. Če želite zagnati navigacijo v levem kotu, jo nastavite z 0 levim robom in oblazinjenjem in jo lebdite v levo.
Navadite se nastavljati širino, tako da vaš meni ne zajema več ali manj prostora, kot ga nameravate. Za vodoravne menije je to običajno celotna širina zasnove. Lahko tudi dodate barvo ozadja na seznam za lažje branje.
ul # navigation {
plovec: levo;
marža: 0;
oblazinjenje: 0;
širina: 100%;
barva ozadja: # 039;
}
Skrivnost vodoravnega navigacijskega menija je v elementih seznama. Elementi seznama so običajno blokirani elementi, kar pomeni, da imajo ti elementi novo vrstico pred in za vsako. S preklopom zaslona iz bloka v vrstico prisilite elemente seznama, da se vodoravno poravnajo drug ob drugem.
ul # navigacija li {display: inline; }
Povezave obravnavajte natanko tako kot meni za navpično krmarjenje z enakimi barvami in okrasjem besedila. Dodajte zgornjo obrobo, da gumbe razmejite, ko uporabnik premakne miškin kazalec nad gumb. Nato odstranite zaslon: blok; saj to vrstico vrne nazaj in uniči vodoravni meni.
Ste tukaj Informacije o lokaciji
Drug vidik HTML-ja je ta identifikator:
tukaj ste
Če želite v svojem meniju spremeniti trenutno lokacijo svojih uporabnikov, s tem ID-jem določite drugo barvo ozadja ali drug slog. Premaknite ta ID atributa v pravi element menija na drugih straneh, tako da bo trenutna stran vedno označena.
Če na svoji strani sestavite te sloge, lahko ustvarite vodoravno ali navpično menijsko vrstico, ki deluje z vašim spletnim mestom, je hitra za prenos in enostavna za posodobitev. Uporaba XHTML + CSS spremeni vaše sezname v močno orodje za oblikovanje.
Če želite več primerov vodoravnih menijev, poiščite naslednje:
- Stiliziran vodoravni meni
- Osnovna vodoravna predloga menija
- Stiliziran vodoravni meni z You Are Here
- Osnovna predloga vodoravnega menija z Tu ste