Një udhëzues hap pas hapi
Nëse menyja juaj e lundrimit është një rresht horizontal përgjatë rreshtit të lartë ose një rresht vertikal poshtë, është ende vetëm një listë. Kur harton lundrimin në ueb, shpesh është e lehtë të harrohet se një menu navigimi është vetëm një grup i lavdëruar i lidhjeve. Por nëse programoni lundrimin tuaj duke përdorur XHTML + CSS, ju mund të krijoni një meny që është i vogël për t'u shkarkuar (XHTML) dhe i lehtë për t'u përshtatur (CSS).
Fillimi
Për të filluar hartimin e një liste për lundrim, duhet të përdorni një listë.
Mund të jetë një listë standarde e parregulluar që është identifikuar si navigacion:
Nëse shikoni nga afër në HTML, do të vëreni se lidhja "Home" gjithashtu ka një ID të jush. Kjo do t'ju lejojë të krijoni një meny që identifikon vendndodhjen aktuale për lexuesit tuaj. Edhe nëse nuk planifikoni të keni atë lloj vizatimi vizual në faqen tuaj tani, mund ta përfshini atë informacion. Nëse vendosni të shtoni shenjën më vonë, do të keni më pak kodime për të përgatitur faqen tuaj.
Pa ndonjë styling CSS , ky meny XHTML duket si një listë standarde të parregulluar. Ka plumba dhe artikujt e listës janë pakëzuar. Për shkak se po përdor lidhje të vendqëndrimit , shumica e shfletuesve nuk do të shfaqin lidhjet si të klikueshme (të nënvizuara dhe në blu). Nëse ngjit HTML në vijim në një faqe Web, navigacioni yt do të duket kështu:
- shtëpi
- Produkte
- Sherbime
- Na kontaktoni
Kjo është shumë e mërzitshme dhe nuk duket shumë si një meny. Por me disa stile CSS të shtuara në listë, mund të krijoni një meny që ju bën krenar.
Menuja e navigimit vertikal
Një meny vertikale navigimi është shumë e lehtë për të shkruar sepse tregon në të njëjtën mënyrë si një listë normale: lart e poshtë.
Artikujt e listës shfaqen vertikalisht poshtë faqes.
Kur unë jam styling menus, më pëlqen të fillojë nga jashtë dhe të punojnë në. Me këtë, dua të them se unë së pari stil ul navigacion ul dhe pastaj të shkojë në elementet li dhe pastaj lidhjet, etj Pra, për këtë menu, së pari përcaktoni gjerësinë e menysë. Kjo do të sigurojë që edhe nëse artikujt e menysë janë të gjata, ata nuk do të shtyjnë pjesën tjetër të faqosjes mbi ose do të shkaktojnë lëvizje horizontale.
ul # navigacion {width: 12em; }
Pasi të kem vendosur gjerësinë, mund të luaj me artikujt e listës. Kjo më lejon të vendos gjëra të tilla si (për të hequr qafe plumbat), ngjyrat e sfondit, kufijtë, shtrirjen e tekstit dhe kufijtë.
ul # navigacion li {
lista-style: none;
background-color: # 039;
kufiri i sipërm: i ngurta 1px # 039;
text-align: majtas;
margjina: 0;
}
Pasi të keni vendosur bazat për artikujt e listës, mund të filloni të luani me mënyrën se si duket menyja në zonën e lidhjeve. Stili i parë UL # navigacion LI A dhe pastaj lidhja A: A: vizito, A: rri pezull dhe A: aktiv (nëse doni). Për lidhjet, më pëlqen të bëj lidhjet një element bllok (në vend se default në linjë). Kjo i detyron ata të marrin të gjithë hapësirën e LI-së dhe ata veprojnë më shumë si një paragraf, gjë që i bën ata më të lehtë të stilet si butonat e menysë. Gjëja tjetër që bëj gjithmonë është heqja e nënvizimit (text-decoration: none;); pasi kjo i bën butonat të duken më shumë si butona për mua.
Por sigurisht, dizajni juaj mund të jetë ndryshe.
ul # navigation li a {
shfaq: bllok;
tekst-dekorim: asnjë;
mbushje: .25em;
fund i kufirit: i ngurta 1px # 39f;
e drejta kufitare: e ngurta 1px # 39f;
}
Vini re se me ekranin: bllok; vendosur në lidhjet, kutia e tërë e artikullit të menusë mund të klikohet, jo vetëm letra. Kjo është gjithashtu e mirë për përdorshmërinë. Sigurohuni që të vendosni ngjyrat e lidhjes (lidhja, vizita, rri pezull dhe aktiv) nëse dëshironi që ato të jenë të ndryshme nga blu, e kuqe dhe vjollcë.
a: link, a: vizito {color: #fff; }
a: hover, a: aktiv {color: # 000; }
Gjithashtu, më pëlqen t'i jap një shtysë pak më shumë vëmendjes duke ndryshuar ngjyrën e sfondit.
a: hover {background-color: #fff; }
Nëse dëshironi më shumë shembuj të menutë vertikale, konsultohuni me listën e mëposhtme.
- Një menu vertikale me stil
- Një Template Temës së Temave Bazike Vertikale
- Një Menu Vertikale me Ty janë Këtu
- Një Template Templates së Temave Bazike me Ju Janë Këtu
Menuja horizontale e lundrimit
Krijimi i menysë horizontale të navigimit është pak më e vështirë se sa menytë vertikale të navigimit, sepse ju duhet të kompensoni faktin se listat HTML preferojnë të shfaqen vertikalisht. Ashtu si me menunë horizontale, së pari krijoni listën tuaj të menusë të navigimit :
Për të krijuar një meny horizontale, punoni ashtu si keni bërë me menunë vertikale. Filloni me pjesën e jashtme dhe punoni. Duke qenë se unë dua që lundrimi im të fillojë në këndin e majtë, e kam vendosur me 0 diferencë të majtë dhe mbushje, dhe unë e notoj në të majtë. Ju gjithashtu duhet të merrni në zakonin e përcaktimit të gjerësisë në mënyrë që menyja juaj të mos marrë më shumë ose më pak hapësirë sesa keni ndërmend. Për menutë horizontale, kjo zakonisht është gjerësia e plotë e dizajnit. Gjithashtu shtova një ngjyrë të sfondit në të gjithë listën për ta bërë më të lehtë leximin.
ul # navigacion {
noton: majtas;
margjina: 0;
mbushje: 0;
gjerësia: 100%;
background-color: # 039;
}
Por sekreti i menysë së navigimit horizontal është në artikujt e listës. Artikujt e listës janë zakonisht elemente bllokuese, që do të thotë se ata do të kenë një rresht të ri para dhe pas secilit. Duke kaluar ekranin nga blloku në vijë, ju detyroni elementët e listës të rreshtoni pranë njëri-tjetrit horizontalisht.
ul # navigacion li {display: inline; }
I trajtova lidhjet tamam si i trajtova në menunë vertikale të navigimit, me të njëjtat ngjyra dhe dekorime tekstesh. Kam shtuar një kufi të lartë për të përcaktuar butonat kur ato mbahen mbi të. E vetmja gjë që unë hiqa ishte shfaqja: bllok; pasi kjo do t'i kthejë linjat e reja dhe do të shkatërrojë menunë horizontale.
ul # navigation li a {
tekst-dekorim: asnjë;
mbushje: .25em 1em;
fund i kufirit: i ngurta 1px # 39f;
kufiri i sipërm: i ngurta 1px # 39f;
e drejta kufitare: e ngurta 1px # 39f;
}
a: link, a: vizito {color: #fff; }
ul # navigation li a: rri pezull {
background-color: #fff;
ngjyra: # 000;
}
Jeni këtu për informacionin e vendndodhjes
Një tjetër aspekt i HTML është identifikuesi i vetëdijshëm. Nëse dëshironi të modifikoni menunë tuaj për të treguar vendndodhjen aktuale të përdoruesve tuaj, thjesht përdorni këtë ID për të përcaktuar një ngjyrë tjetër sfondi ose stil tjetër. Zhvendos atributin ID te artikulli i saktë i menusë në faqe të tjera në mënyrë që faqja aktuale të jetë gjithnjë e theksuar.
ul # navigation li # ju jeni këtu një {background-color: # 09f; }
Nëse vendosni këto stilet së bashku në faqen tuaj, mund të krijoni një bar të menusë horizontale ose vertikale që punon me faqen tuaj, por është i shpejtë për t'u shkarkuar dhe shumë i lehtë për t'u përditësuar në të ardhmen. Përdorimi i XHTML + CSS i kthen listat tuaja në një mjet shumë të fuqishëm për dizajn.
Nëse dëshironi më shumë shembuj të menutë horizontale, konsultohuni me sa vijon.
- Një menu horizontale me stil
- Një Template Temës Kryesore Horizontal
- Një menu horizontale e stilit me ty janë këtu
- Një Template Temës së Hapur Horizontal me Ju Janë Këtu