Un ghid pas cu pas
Indiferent dacă meniul de navigare este o linie orizontală în partea de sus sau într-un rând vertical în jos, este totuși doar o listă. La proiectarea navigării web, este ușor să uitați că un meniu de navigare este doar un grup glorificat de linkuri. Dar dacă programați navigarea utilizând XHTML + CSS, puteți crea un meniu care este mic pentru a descărca (XHTML) și ușor de personalizat (CSS).
Noțiuni de bază
Pentru a începe proiectarea unei liste de navigare, trebuie să utilizați o listă.
Poate fi o listă standard neordonată care a fost identificată ca navigație:
Dacă vă uitați atent la codul HTML, veți observa că și linkul "Acasă" are un cod de identitate al dvs. Acest lucru vă va permite să creați un meniu care să identifice locația curentă pentru cititorii dvs. Chiar dacă nu intenționați să aveți acel tip de viziune vizuală pe site-ul dvs. chiar acum, puteți include aceste informații. Dacă decideți să adăugați un cue mai târziu, veți avea mai puțin codificare pentru a vă pregăti site-ul.
Fără un stil CSS , acest meniu XHTML arată ca o listă standard neordonată. Există gloanțe și elementele din listă sunt ușor indentate. Pentru că folosesc linkuri de destinație , majoritatea browserelor nu vor afișa linkurile sub formă de clic (subliniate și în albastru). Dacă inserați în HTML-ul de mai sus într-o pagină Web, navigarea dvs. va arăta astfel:
- Acasă
- Produse
- Servicii
- Contacteaza-ne
Acest lucru este destul de plictisitor și nu arată prea mult ca un meniu. Dar, cu doar câteva stiluri CSS adăugate în listă, puteți crea un meniu care vă face mândri.
Meniul de navigare vertical
Un meniu vertical de navigare este foarte ușor de scris deoarece se afișează în același mod ca o listă normală: în sus și în jos.
Articolele din listă se afișează vertical pe pagină.
Când fac meniuri, îmi place să încep de la exterior și să lucrez. Prin aceasta, vreau să spun că am inițial stilul de navigare ul # și apoi trec la elementele li și apoi linkurile etc. Deci, pentru acest meniu, mai întâi definiți lățimea meniului. Acest lucru vă va asigura că, chiar dacă elementele de meniu sunt lungi, nu vor împinge restul aspectului sau nu vor cauza derularea orizontală.
ul # navigație {lățime: 12em; }
După ce am setat lățimea, pot juca cu elementele din listă. Acest lucru îmi permite să stabilesc lucruri ca (pentru a scăpa de gloanțe), culori de fundal, margini, alinierea textului și margini.
ul # navigation li {
listă: nu există;
fundal-culoare: # 039;
frontieră: solid 1px # 039;
text-aliniere: stânga;
marja: 0;
}
Odată ce ați setat elementele de bază pentru elementele listă, puteți începe să jucați cu modul în care arată meniul în zona de legături. Primul stil este UL # navigație LI A și apoi linkul A: A: vizitat, A: hover și A: activ (dacă doriți). Pentru linkuri, îmi place să fac link-urile un element de bloc (mai degrabă decât implicit în linie). Acest lucru îi forțează să preia întregul spațiu al LI - și se comportă mai mult ca un paragraf, ceea ce le face mai ușor de stil ca butoane de meniu. Alt lucru pe care îl fac întotdeauna este eliminarea sublinierii (text-decoration: none; deoarece acest lucru face ca butoanele să arate mai mult ca niște butoane pentru mine.
Dar, desigur, designul dvs. ar putea fi diferit.
ul # navigation li a {
afișare: bloc;
text-decoration: nici unul;
padding: .25em;
frontieră de fund: solid 1px # 39f;
frontieră-dreapta: solid 1px # 39f;
}
Observați că cu afișajul: blocați; setat pe link-uri, întreaga casetă a elementului din meniu este clicabilă, nu doar literele. Acest lucru este, de asemenea, bun pentru uzabilitate. Asigurați-vă că setați culorile link-urilor (link, visited, hover și active) dacă doriți ca acestea să fie diferite de cele implicite albastru, roșu și purpuriu.
a: link, a: vizitat {culoare: #fff; }
a: hover, a: activ {culoare: # 000; }
De asemenea, îmi place să acord o atenție mai mare situației de tip hover prin schimbarea culorii de fundal.
a: hover {background-color: #fff; }
Dacă doriți mai multe exemple de meniuri verticale, consultați lista de mai jos.
- Un meniu vertical cu stil
- Un șablon de bază verticală de bază
- Un meniu vertical cu stilul tău este aici
- Un șablon de bază de meniu vertical cu dvs. sunteți aici
Meniu orizontal de navigare
Crearea meniurilor orizontale de navigare este puțin mai dificilă decât meniurile de navigare verticale, deoarece trebuie să compensați faptul că listele HTML preferă să fie afișate vertical. Ca și în meniul orizontal, creați mai întâi lista meniurilor de navigare :
Pentru a crea un meniu orizontal, lucrați la fel ca în cazul meniului vertical. Începeți cu exteriorul și lucrați. Deoarece vreau ca navigarea mea să pornească în colțul din stânga, am setat-o cu marginea din stânga și cu padding-ul și o flot la stânga. Ar trebui, de asemenea, să obișnuiți să setați lățimea, astfel încât meniul dvs. să nu ia mai mult sau mai puțin spațiu decât intenționați. Pentru meniuri orizontale, aceasta este, de obicei, lățimea totală a designului. De asemenea, am adăugat o culoare de fundal în întreaga listă pentru a fi mai ușor de citit.
ul # navigation {
plutește la stânga;
marja: 0;
umplutura: 0;
lățime: 100%;
fundal-culoare: # 039;
}
Dar secretul meniului de navigare orizontal se află în elementele listate. Elementele listă sunt, în mod normal, elemente de bloc, ceea ce înseamnă că vor avea un rând nou plasat înainte și după fiecare. Prin comutarea afișajului de la bloc la interior, forțați elementele listei să se alinieze unul lângă altul orizontal.
ul # navigație li {afișare: inline; }
Am tratat linkurile exact așa cum le-am tratat în meniul vertical de navigare, cu aceleași culori și decorațiuni text. Am adăugat o margine de sus pentru a delimita butoanele atunci când sunt suspendate. Singurul lucru pe care l-am scos a fost ecranul: bloc; deoarece aceasta va pune noile linii înapoi și va distruge meniul orizontal.
ul # navigation li a {
text-decoration: nici unul;
padding: .25em 1em;
frontieră de fund: solid 1px # 39f;
vârf de frontieră: solid 1px # 39f;
frontieră-dreapta: solid 1px # 39f;
}
a: link, a: vizitat {culoare: #fff; }
ul # navigație a a: hover {
fundal-culoare: #fff;
culoare: # 000;
}
Sunteți aici Informații despre locație
Un alt aspect al codului HTML este identificatorul tău. Dacă doriți să modificați meniul pentru a indica locația curentă a utilizatorilor dvs., pur și simplu utilizați acest ID pentru a defini o altă culoare de fundal sau alt stil. Deplasați acel atribut ID la elementul de meniu corect din alte pagini, astfel încât pagina curentă să fie întotdeauna evidențiată.
ul # navigare li # vă aflați a {background-color: # 09f; }
Dacă puneți aceste stiluri împreună pe pagina dvs., puteți crea o bară de meniu orizontală sau verticală care funcționează cu site-ul dvs., dar este rapid de descărcat și foarte ușor de actualizat în viitor. Folosind XHTML + CSS transformați listele într-un instrument foarte puternic pentru design.
Dacă doriți mai multe exemple de meniuri orizontale, consultați următoarele.
- Un meniu orizontal orizontal
- Un șablon de meniu orizontal de bază
- Un meniu orizontal orizontal cu tine ești aici
- Un șablon de meniu orizontal de bază cu dvs. sunteți aici