CSS meniul vertical: faci singur

Unii webmasteri nu doresc să-și petreacă timpul în curs de dezvoltare de la zero elemente simple, care există deja. Ei cred că nu există nici un punct în pierzi timpul pe ceva care a fost mult timp acolo. De fapt, pentru cei care sunt doar mastering HTML si CSS, este important să vă facă o mulțime de lucruri pentru a avea o bună înțelegere a muncii lor. Acest lucru se aplică la meniu. Crearea unei meniuri CSS verticale. Acesta se va baza doar pe HTML și CSS, fără utilizarea de Javascript și JQuery. Fiecare meniu este o listă de link-uri care duc la pagini ale site-ului.

pași de bază

Pentru a crea un simplu meniu vertical CSS, aveți nevoie de următoarele etape:

1. În primul rând, stabilește o listă de link-uri (folosind HTML code), din care meniul va fi. Dă-le un nume, de exemplu, sunt după cum urmează:

1. Acasă.
2. Istoria noastră.
3. Ghid.
4. Servicii.
5. Contacte.

2. Apoi Styling link-uri cum doriți cu ajutorul CSS.

Scriem codul HTML, păstrați în fișierul my_Vmenu.html și a vedea cum va arăta în browser:

Aceasta este baza (scheletul) din meniul nostru. # 1, # 2, etc. ar trebui să fie înlocuită cu referință. Vezi cum arată într-un browser. Imaginea nu va place. Acum trebuie să începem să descrie elementele de stil, pentru a face un complet meniuri CSS verticale.

Descriere stiluri

Creați un fișier my_Vmenu.css, care a stabilit tot ceea ce doriți să îmbunătățească aspectul unui astfel de element important al site-ului. Aici este codul, dintre care introducerea va revitaliza meniurile CSS verticale. Acesta și scrie noul fișier, și apoi vom lua o privire mai atentă sensul liniilor principale care sunt date.

DESCRIERE DETALIATĂ stylesheet folosit

Acum ia în considerare detaliile meniul nostru CSS vertical:

list-style-type vă permite să eliminați lista de markeri. Prin setarea „0“ la marginea și padding scoateți extra padding în listă. După cum se poate observa din codul HTML, meniul nostru este o listă, iar stilurile sunt definite folosind CSS.

ul # my_Vmenu - stilul general al întregii liste.

ul # my_Vmenu li a - legături de stil între tag-ul li.

ul # my_Vmenu li a: hover - o descriere a tipului în cauză cu elemente din meniu, la un moment în care unul trece peste oameni.

ul # my_Vmenu li un interval - descriere text (meniul din titlu).

Amintiți-vă că fișierele my_Vmenu.css my_Vmenu.html și trebuie să fie păstrate în același director. Cu toate acestea, ele pot fi situate în dosare diferite, dar atunci este important să se înregistreze în calea de fișier my_Vmenu.html la my_Vmenu.css. Fii atent, pentru că noii veniți această problemă de multe ori.

Stilul trebuie să fie conectate între etichetele de cap într-un fișier HTML-. menu_1.png și menu_2.png - aceasta este imaginea pentru elementul de meniu imagine în starea normală și planare.

Este mai bine pentru a salva imaginile într-un dosar separat pentru imagini, denumiți-l my_images, dar apoi modificați codul CSS. Scrie în cazul în care sunt afișate aceste imagini, ele sunt în acest director: URL-ul (my_images / menu_1.png) și URL-ul (my_images / menu_2.png).

În restul proprietăților descrise în codul CSS, pentru a înțelege cu ușurință. Acestea definesc aspectul meniului nostru. Este ușor de observat că lățimea și înălțimea elementelor specificate pentru aceleași elemente în starea normală, și atunci când treceți cu mouse-ul peste ele. Dimensiunea fontului 18px, padding specifică adâncitura din diferite părți ale locului nume. afișare vă permite să setați unitatea de afișare pentru a seta lățimea și padding.

Meniul nostru vertical

După cum puteți vedea, meniurile CSS verticale pentru a crea cu ușurință. Pe baza datelor de cunoaștere va fi capabil să facă frumos și atractiv pentru vizitatori pe site-ul dvs.! Folosiți-vă imaginația, și apoi un meniu elegant pentru a completa site-ul tău.