Sa tulong ng karampatang HTML code at simpleng mga panuntunan sa CSS, maaari kang lumikha ng isang pop-up menu, dagdagan ito at baguhin ito. Sa pamamagitan ng paggamit ng mga cascading table at markup tool sa wika, masisiguro mong gumagana nang tama ang menu sa lahat ng mga browser.
Panuto
Hakbang 1
Hawakan muna ang pangunahing menu bar. Lumikha ng isang espesyal na listahan na may bilang na may isang submenu sa isang text editor. Karaniwan ang "Notepad" ay ginagamit para sa mga hangaring ito. Ang submenu ay gumaganap bilang isang elemento ng listahan ng magulang. Halimbawa: Unang ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Hakbang 2
I-save ang listahang ito sa isang hiwalay na html file. Pagkatapos ay lumikha ng isang.css file. Ipasok ang lahat ng kinakailangang mga parameter ng style sheet. Maingat na gawin ito, dahil ang isang pagkakamali, at ang pop-up menu ay hindi ipapakita nang tama o hindi gagana.
Hakbang 3
Alisin ang anumang mga bala at padding na inilapat sa listahan ng bala. Itakda ang lapad ng menu gamit ang mga tool ng CSS: ul -style: wala; lapad: 200px; }
Hakbang 4
Markahan ang kamag-anak na posisyon ng lahat ng mga item sa listahan na may isang katangian na tinawag na posisyon: ul li: kamag-anak; }
Hakbang 5
Pagkatapos ay ayusin ang submenu, ang mga elemento na lilitaw mula sa menu ng magulang patungo sa kanan kapag ang mouse cursor ay higit sa item: li ul: absolute; left: 199px; top: 0; display: none; }
Hakbang 6
Ang kaliwang katangian ay isang pixel na mas mababa sa lapad ng menu mismo. Pinapayagan nitong mailagay nang tama ang mga pop-up item nang hindi lumilikha ng mga dobleng hangganan. Ginagamit ang katangian ng display upang itago ang submenu kapag binubuksan ang pahina.
Hakbang 7
Estilo ng mga link kung kinakailangan gamit ang naaangkop na mga pagpipilian sa css. Isama ang display: parameter ng pag-block upang maabot ng mga link ang lahat ng puwang na nakalaan para sa kanila. Upang maipakita ang menu kapag ang mouse cursor ay lumalagay sa ibabaw nito, ipasok ang sumusunod na code: li: hover ul: block; }
Hakbang 8
Magtakda ng mga karagdagang pagpipilian para sa pagpapakita ng mga item sa listahan at mga link ayon sa ninanais. Magsama ng isang katangian sa.html file. Handa nang gamitin ang pop-up menu.
