Mga kompyuter, Software
Unsaon paghimo sa usa ka drop-down nga menu sa CSS
Karon atong hunahunaon ang pangutana "Unsaon paghimo sa usa ka drop-down menu sa CSS?". Kini kinahanglan nga gilayon nga isulti nga kini nga elemento mahimo nga walay koneksyon sa bisan unsa nga dugang nga mga paagi. Nga mao, ang menu mahimo lamang nga adunay CSS ug HTML.
Pagpangandam sa
Aron hingpit nga masabtan kung unsa ang nahitabo sa artikulo, kinahanglan nimo ang labing gamay nga kaila sa teoretikal nga materyal. Apan kung pamilyar ka sa mga pseudo-klase, mahimo nimong laktawan kini nga parapo. Busa, aron sa paghimo sa usa ka vertical nga drop-down menu sa CSS, nagkinahanglan kita og elemento sama sa ": hover". Ang usa ka pseudo-class ": hover" mahimong i-assign sa bisan unsa nga tag sa HTML. Kini nagtugot kanimo sa pagtino kon ang usa ka mouse cursor nagtudlo sa usa ka butang. Pananglitan, nag-assign kami og propiedad: "a: hover {color: red;}". Kini nga pagsulat nagpasabot nga kon ikaw mag-hover sa bisan unsang tag, ang mga sulod niini mapula. Angay nga hinumdoman nga kining pseudo-klase nagpasabot nga usa ka unactivated item. Pinaagi sa dalan, ": hover" nagsaysay susama nga mga elemento. Apan kini uban sa tabang niining pseudo-klase nga kita maghimo sa usa ka drop-down CSS nga menu.
Panudlo
Una sa tanan, angay nga masabtan kung unsa ang drop-down menu. Ubos niini nga kahulogan, adunay daghang mga nagkalainlain nga mga pamaagi sa pagtukod sa nagkalain-laing mock-ups. Sa kini nga kaso, atong pag-disassemble ang pagtukod nga naglangkob sa daghang mga kanunay nga makita nga mga butang ug daghang mga dugang (gitago) nga mga butang. Atong tapuson ang teorya ug pag-ensayo.
- Paghimo og layout sa among menu. Aron mahimo kini, atong himoon ang HTML markup. Paghimo og nested list:
- < / Ul>. Kini sama sa imong drop-down menu. Ang CSS molihok dayon. Sa kini nga kaso, ang nag-unang listahan naglangkob sa tulo ka nag-unang mga butang ug duha ka nested nga mga.
- Tagoan ang dugang nga menu. Sa paghimo niini, mogamit kami og mga style sheets, ipatin-aw ang mosunod nga kabtangan: ul ul {display: none;} Kini magwagtang sa mga elemento sa ikaduhang lista gikan sa screen.
- Paghimo og usa ka menu sa CSS, pagtangtang gikan sa nag-unang listahan. Sa mga cascading style sheets, among gisulat ang mosunod nga lagda: ul li: hover ul {display: block;}. Kini nga pagsulat nagpasabot nga kung ikaw mag-hover sa mouse ibabaw sa li element nga anaa sa lista sa ul, ang ul (nested) makita sa screen. Sa unang pagtan-aw, ang ingon nga pamaagi ingon og komplikado ug makalibog. Apan sa pagkatinuod, ang tanan yano kaayo.
- Gamita kini nga layout, nga isulod ang imong sulod sa tunga sa mga tag. Mahimo nimo mausab ang gidaghanon sa mga butang sa listahan.
Mga pagbag-o nga dekorasyon
Sa diha nga ang main menu layout andam na, mahimo ka magpadayon sa iyang disenyo. Tingali, daghan sa unang bahin gusto nga mawala ang mga marka, nga nagtudlo sa elemento sa lista. Gihimo kini uban ang usa ka propiedad sa CSS, nga mao, list-style-type. Kinahanglan nimo idugang kini nga entry: li {list-style-type: none;}. Sunod, mahimo nimong ibutang ang usa ka frame ug maghimo og background. Ang mga hulga sa utlanan ug kaagi motabang kanimo. Tingali, ang uban dili ganahan nga ang drop-down menu makita ingon nga usa ka dugang nga listahan, samtang nagpalapad sa mga nag-unang elemento. Aron ayuhon kini, mahimo nimo kini nga posisyon. Sa paghimo niini, sa mga cascading style sheets isulat ang mosunod nga ulohan: ul ul {position: absolute; Wala: 15px; Tuo: 15px; Top: 15px; Ubos: 15px;}. Siyempre, ang mga prinsipyo nga imong gamiton sa imong kaugalingon. Depende kung asa nimo gusto makita ang drop-down menu, ang CSS maghatag og daghang mga kabtangan nga makadugang sa lainlaing mga epekto ug pag-decorate sa among mga lista.
Panapos
Sa makausa pa, angay nga matikdan ang disenyo sa layout sa menu. Aron mahatag ang mga lagda sa CSS sa kini nga kaso, gigamit nimo ang nested values, alang sa pananglitan ul ul. Kung adunay lain nga susama nga mga disenyo sa dokumento, nan dunay mga dagkong problema. Niini nga mga sitwasyon, kinahanglan nimo nga gamiton ang mas espesipikong katuyoan, sama pananglit, mga tigpili o mga tigpaila sa id. Ang layout sa drop-down menu nga gipakita sa artikulo gituyo alang sa pagkasinati sa kinatibuk-ang disenyo. Ang nahabilin sa trabaho anaa sa imong mga abaga.
Similar articles
Trending Now