Menu vertikale CSS: duke bërë atë vetë

Disa webmasters nuk duan të kalojnë kohën në zhvillim nga e para elemente të thjeshta që tashmë ekzistojnë. Ata besojnë se nuk ka asnjë pikë në humbur kohën tuaj në diçka që ka qenë kohë të gjatë atje. Në fakt, për ata që janë vetëm mastering HTML dhe CSS, është e rëndësishme për të bërë vetes shumë gjëra që të ketë një kuptim të mirë të punës së tyre. Kjo vlen në menu. Krijo një vertikale menutë CSS. Ajo do të bazohet vetëm në HTML dhe CSS, pa përdorimin e Javascript dhe jQuery. Çdo menu është një listë me lidhje që të çojnë në faqet e internetit.

hapa themelore

Për të krijuar një të thjeshtë vertikale menu CSS, ju keni nevojë për hapat e mëposhtëm:

1. Së pari, do të përcaktojë një listë të lidhjeve (duke përdorur kodin HTML), nga të cilat menu do të jetë. Jepu atyre një emër, për shembull, janë si më poshtë:

1. Në shtëpi.
2. historia jonë.
3. Guide.
4. Services.
5. Kontaktet.

2. Pastaj Styling lidhje si ju dëshironi me ndihmën e CSS.

Ne shkruani kodin HTML, të mbajtur në dosjen my_Vmenu.html dhe të shohim se si do të duket në shfletuesin:

Kjo është baza (skeleti) i menynë tonë. # 1, # 2, etj duhet të zëvendësohet me referencë. Shih se si ajo duket në një shfletues. Foto ju nuk do të donte. Tani ne duhet të fillojnë të përshkruajë elementet e stilit, për të bërë një të plotë menu vertikale CSS.

Përshkrimi stilet

Krijo një my_Vmenu.css fotografi, e cila vendosur gjithçka që ju dëshironi për të përmirësuar pamjen e një element të rëndësishëm të vendit. Këtu është kodi, futja e të cilave do të rigjallërojë menutë vertikale CSS. Ajo dhe shkruani skedarin e ri, dhe pastaj ne do të marrë një vështrim më të afërt kuptimin e linjave kryesore që janë dhënë.

PËRSHKRIMI I DETAJUAR përdorur stylesheet

Tani e konsiderojnë detajet e menynë tonë CSS vertikal:

list-style-type ju lejon për të hequr listën e shënuesve. Me vendosjen e "0" në diferencë dhe mbushje hiqni mbushje shtesë në listë. Siç mund të shihet nga Kodi HTML, menu jonë është një listë, dhe stilet janë të përcaktuara duke përdorur CSS.

ul # my_Vmenu - stili i përgjithshëm i të gjithë listën.

ul # my_Vmenu li a - Lidhjet stil midis li tag.

ul # my_Vmenu li a: hover - një përshkrim të llojit në shqyrtim e menu items në një kohë kur një rri pezull mbi njerëzit.

ul # my_Vmenu li një pëllëmbë - përshkrim text (menu titulli).

Mos harroni se fotografi my_Vmenu.css my_Vmenu.html dhe duhet të ruhet në të njëjtën directory. Megjithatë, ato mund të jenë të vendosura në dosje të ndryshme, por atëherë është e rëndësishme që të regjistrohen në rrugën my_Vmenu.html file në my_Vmenu.css. Të jenë të kujdesshëm, sepse të ardhurve për këtë problem shpesh.

Style duhet të jetë i lidhur në mes tags kokë mbas një HTML-skedar. menu_1.png dhe menu_2.png - kjo është fotografia për artikull menu foto në gjendje normale dhe rri pezull.

Është më mirë për të ruajtur imazhet në një dosje të veçantë për imazhet, atë emër my_images, por pastaj Rregullo kodin CSS. Shkruaj ku këto imazhe janë treguar, ata janë në këtë directory: url (my_images / menu_1.png) dhe url (my_images / menu_2.png).

Në pjesën tjetër të pronave të përshkruara në kodin CSS, për të kuptuar lehtësisht. Ato përcaktojnë pamjen e menysë sonë. Është e lehtë të konstatoj se gjerësia dhe lartësia e artikujve të specifikuar për sendet e njëjta në gjendje normale, dhe kur ju rri pezull miun mbi ta. font size 18px, mbushje përcakton vulë nga anë të ndryshme të emrave të vendeve. ekran ju lejon të vendosur njësi ekranit për të vendosur gjerësinë dhe mbushje.

menu ynë vertikale

Siç mund ta shikoni, menutë vertikale CSS për të krijuar lehtësi. Në bazë të dhënave të dijes ju do të jetë në gjendje për ta bërë atë të bukur dhe tërheqëse për vizitorët në faqen tuaj! Përdorni imagjinatën tuaj, dhe pastaj një menu elegant për të plotësuar faqen tuaj.