Indiferent dacă meniul de navigare al site-ului dvs. web este un rând orizontal în partea de sus sau un rând vertical în partea laterală, este doar o listă. La proiectare navigare pe web, un meniu de navigare este un grup de linkuri. Când vă programați navigarea utilizând XHTML + CSS, puteți crea un meniu mic de descărcat (XHTML) și ușor de personalizat (CSS).
Noțiuni de bază
Pentru a proiecta o listă pentru navigare, trebuie să utilizați o listă. Poate fi o listă standard neordonată care a fost identificată ca navigare. De exemplu:
- Acasă
- Produse
- Servicii
- Contactează-ne
Când priviți codul HTML, linkul Acasă are un ID de.
esti aici
Acest lucru vă 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 indiciu vizual pe site-ul dvs. acum, puteți include aceste informații. Dacă decideți să adăugați indicativul mai târziu, veți avea mai puține coduri pentru a vă pregăti site-ul.
Fara nici o
Stil CSS, acest meniu XHTML arată ca o listă standard neordonată. Există gloanțe, iar elementele listei sunt ușor indentate. Atunci când se utilizează linkuri de substituent, majoritatea browserelor nu afișează linkurile ca făcând clic (subliniat și albastru). Când lipiți codul HTML într-o pagină web, navigarea dvs. arată astfel:- Acasă
- Produse
- Servicii
- Contactează-ne
Acest lucru nu arată prea mult ca un meniu. Cu toate acestea, cu câteva stiluri CSS adăugate la listă, puteți crea un meniu care să vă facă mândru.
Dacă doriți mai multe exemple de meniuri verticale, efectuați o căutare pe web pentru următoarele:
- Un meniu vertical cu stil
- Un șablon de meniu vertical de bază
- Un meniu vertical stilat cu You Are Here
- Un șablon de meniu vertical de bază cu You Are Here
Meniu de navigare verticală
Un meniu de navigare vertical este ușor de scris, deoarece se afișează în același mod ca o listă normală: în sus și în jos. Elementele listei se afișează vertical în josul paginii.
Când creați meniuri, începeți din exterior și lucrați în interior. Mai întâi, stilizați navigarea:
ul # navigare
Apoi, treceți la elemente și linkuri. Mai întâi, definiți lățimea meniului. Acest lucru asigură că, dacă elementele de meniu sunt lungi, articolele nu vor împinge restul aspectului și nu vor provoca derularea orizontală.
ul # navigation {width: 12em; }
După ce setați lățimea, lucrați la elementele listei. Acest lucru vă permite să setați lucruri precum culorile de fundal, marginile, alinierea textului și marginile.
ul # navigation li {
list-style: nici unul;
culoare de fundal: # 039;
top-border: solid 1px # 039;
text-align: stânga;
marja: 0;
}
După ce ați setat elementele de bază pentru elementele listei, lucrați la aspectul meniului în zona linkurilor. Mai întâi stilizați navigarea:
UL # navigare LI A
Apoi, stilizați următoarele:
O legătură
A: vizitat
A: planează
A: activ
Pentru legături, faceți din legături un element de bloc (mai degrabă decât implicit în linie). Acest lucru forțează legăturile să ocupe întregul spațiu al LI și să acționeze ca un paragraf, facilitând stilizarea legăturilor ca butoane de meniu. Apoi, eliminați următoarele:
subliniat, text-decor: nici unul; la fel de
Acest lucru face ca butoanele să arate mai mult ca butoane. Designul dvs. ar putea fi diferit.
ul # navigation li a {
display: bloc;
decor-text: nici unul;
căptușeală: .25em;
marginea de jos: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Cu display: bloc; setat pe linkuri, întreaga casetă a elementului de meniu poate fi făcută clic, nu numai literele. Acest lucru este, de asemenea, bun pentru utilizare. Setați culorile linkului (link, vizitat, plasați cursorul și active) dacă doriți ca linkurile să fie diferite de albastru, roșu și violet implicit.
a: link, a: vizitat {color: #fff; }
a: hover, a: active {color: # 000; }
De asemenea, puteți acorda stării de plutire un pic de atenție schimbând culoarea de fundal.
a: hover {background-color: #fff; }
Meniu de navigare orizontală
Crearea meniurilor de navigare orizontală este puțin mai dificilă decât a meniurilor de navigare verticală, deoarece trebuie să compensați faptul că listele HTML preferă să fie afișate vertical. Ca și în meniul orizontal, creați lista meniului de navigare:
- Acasă
- Produse
- Servicii
- Contactează-ne
Pentru a crea un meniu orizontal, acționați la fel ca la meniul vertical. Începeți cu exteriorul și lucrați înăuntru. Pentru a începe navigarea în colțul din stânga, setați-l cu 0 margine stângă și umplere și plutați-l spre stânga.
Obișnuiește să setezi lățimea astfel încât meniul să nu ocupe mai mult sau mai puțin spațiu decât intenționezi. Pentru meniurile orizontale, aceasta este de obicei toată lățimea designului. De asemenea, puteți adăuga o culoare de fundal la listă pentru a ușura citirea.
ul # navigare {
plutește la stânga;
marja: 0;
umplutură: 0;
lățime: 100%;
culoare de fundal: # 039;
}
Secretul meniului de navigare orizontal se află în articolele din listă. Elementele de listă sunt în mod normal elemente de bloc, ceea ce înseamnă că aceste elemente au o linie nouă plasată înainte și după fiecare. Comutând afișajul de la bloc la linie, forțați elementele listei să se alinieze orizontal unul lângă altul.
ul # navigation li {display: inline; }
Tratați legăturile exact ca în meniul de navigare vertical, cu aceleași culori și decor de text. Adăugați o margine de sus pentru a delimita butoanele atunci când utilizatorul trece peste un buton. Apoi, scoateți display: bloc; întrucât acest lucru pune noua linie înapoi și distruge meniul orizontal.
Sunteți aici informații despre locație
Un alt aspect al HTML este acest identificator:
esti aici
Dacă doriți să modificați meniul pentru a indica locația curentă a utilizatorilor dvs., utilizați acest ID pentru a defini o altă culoare de fundal sau un alt stil. Mutați acel atribut ID la elementul de meniu corect de pe alte pagini, astfel încât pagina curentă să fie întotdeauna evidențiată.
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. și este rapid descărcată și ușor de actualizat. Utilizarea XHTML + CSS transformă listele dvs. într-un instrument puternic pentru proiectare.
Dacă doriți mai multe exemple de meniuri orizontale, căutați pe web următoarele:
- Un meniu orizontal cu stil
- Un șablon de meniu orizontal de bază
- Un meniu orizontal stilat cu You Are Here
- Un șablon de meniu orizontal de bază cu You Are Here