Bertikal CSS menu: sa pagbuhat niini sa imong kaugalingon

Ang ubang mga Webmasters dili gusto nga mogahin og panahon sa pagpalambo sa gikan sa nagaras yano nga mga elemento nga na anaa. Sila nagtuo nga walay punto sa usik-usik sa imong panahon sa usa ka butang nga dugay na didto. Sa pagkatinuod, alang sa mga lang batid sa HTML ug CSS, kini mao ang importante nga sa paghimo sa imong kaugalingon sa usa ka daghan sa mga butang nga adunay usa ka maayo nga pagsabut sa ilang buhat. Kini magamit ngadto sa menu. Paghimo sa usa ka bertikal CSS menu. Kini nga base lamang sa HTML ug CSS, sa gawas sa paggamit sa Javascript ug JQuery. Ang matag menu mao ang usa ka listahan sa mga mga sumpay nga modala ngadto sa mga panid sa site.

nag-unang mga lakang

Sa paghimo sa usa ka yano nga bertikal menu CSS, nga imong gikinahanglan sa mosunod nga mga lakang:

1. Una, pagtino og usa ka listahan sa mga links (sa paggamit sa code HTML), sa diin ang menu mahimong. Hatagi sila ug usa ka ngalan, alang sa panig-ingnan, mao ang mosunod:

1. Home.
2. Sa atong kasaysayan.
3. Giya.
4. Services.
5. Kontak.

2. Unya Pagkorte sumpay sama sa imong gusto sa tabang sa CSS.

Kita sa pagsulat sa HTML code, sa pagbantay sa my_Vmenu.html file ug tan-awa kon sa unsang paagi kini nga tan-awon sa browser:

Kini mao ang basehan (kalabera) sa atong menu. # 1, # 2, ug uban pa kinahanglan nga gipulihan sa pakisayran. Tan-awa kon sa unsang paagi kini motan-aw sa usa ka browser. Ang hulagway kamo dili sama sa. Karon kita kinahanglan gayud nga magsugod sa paghulagway sa mga elemento sa estilo, aron sa paghimo sa usa ka bug-os nga bertikal CSS menu.

Description estilo

Paghimo sa usa ka file my_Vmenu.css, nga gibutang sa tanan nga mga butang nga imong gusto aron sa pagpalambo sa dagway sa maong usa ka importante nga elemento sa site. Ania ang code, sa pasiuna sa nga revitalize sa bertikal CSS menu. Kini ug isulat ang bag-o nga file, ug dayon kita sa usa ka mas-aw sa kahulogan sa mga nag-unang mga linya nga gihatag.

Detalyado nga paghulagway nga gigamit stylesheet

Karon tagda ang mga detalye sa atong CSS bertikal menu:

listahan-estilo-type nagtugot kaninyo sa pagtangtang sa listahan sa mga puntos. Pinaagi sa paghimo sa "0" sa kilid ug padding kuhaa ang dugang padding sa listahan. Ingon sa makita gikan sa HTML code, ang atong menu mao ang usa ka listahan, ug ang mga estilo nga gihubit sa paggamit CSS.

ul # my_Vmenu - ang kinatibuk-ang estilo sa tibuok listahan.

ul # my_Vmenu li sa usa ka - estilo links sa taliwala sa mga tag li.

ul # my_Vmenu li sa usa ka: Hover - ang usa ka paghulagway sa matang sa ilalum sa konsiderasyon sa mga butang nga menu sa usa ka panahon sa diha nga ang usa ka naglupadlupad sa ibabaw sa mga tawo.

ul # my_Vmenu li usa ka dangaw - text paghulagway (title menu).

Hinumdumi nga files my_Vmenu.css my_Vmenu.html ug kinahanglan nga gitipigan diha sa sama nga directory. Apan, aron sila nahimutang sa lain-laing mga folder, apan kini mao ang importante nga magparehistro sa my_Vmenu.html file dalan sa my_Vmenu.css. Pagbantay, tungod kay ang mga bag-ong nangabot sa niini nga problema sa kanunay.

Style kinahanglan nga konektado sa taliwala sa mga ulo tag sa usa ka HTML-file. menu_1.png ug menu_2.png - kini mao ang hulagway alang sa hulagway menu item sa normal nga kahimtang ug sa Hover.

Kini mao ang mas maayo aron sa pagluwas sa mga larawan sa usa ka linain folder alang sa mga larawan, ngalan niini my_images, apan unya Usba ang CSS code. Isulat diin kini nga mga larawan gipakita, sila anaa sa directory niini: url (my_images / menu_1.png) ug url (my_images / menu_2.png).

Sa uban nga mga kabtangan nga gihulagway diha sa CSS code, sa pagsabut dali. Sila nagpaila sa panagway sa atong menu. Kini mao ang sayon sa makamatikod nga ang gilapdon ug gitas-on sa mga butang nga espesipikong alang sa sama nga mga butang diha sa normal nga kahimtang, ug sa diha nga hover kaninyo sa mouse sa ibabaw kanila. Font gidak-on 18px, padding nagtumbok sa luok gikan sa lain-laing mga kilid sa mga ngalan sa dapit. display lets imong gibutang ang display yunit sa sa sa sa gilapdon ug padding.

Ang atong mga bertikal menu

Samtang kamo mahimo tan-awa, ang mga bertikal CSS menu sa paghimo dali. Sa basehan sa data sa kahibalo kamo makahimo sa paghimo niini nga maanyag ug madanihon sa mga bisita ngadto sa imong web site! Gamita ang imong imahinasyon, ug unya ang usa ka buhong nga menu sa katimbang sa imong site.