Sa tulong ng mahusay na HTML code at simpleng mga panuntunan sa CSS, maaari kang lumikha ng isang magandang popup menu na madaling mabago at madagdagan. Sa pamamagitan ng paggamit ng markup na wika at Cascading Style Sheets, masisiguro mong maayos ang mga menu sa lahat ng mga browser.
Panuto
Hakbang 1
Una, buuin ang pangunahing istraktura ng iyong menu. Magbukas ng isang text editor at lumikha ng isang listahan ng may bilang na may isang submenu na kumikilos bilang isang item ng listahan ng magulang. Halimbawa:
-
Unang elemento
- Item sa dropdown
- Dropdown2
Hakbang 2
I-save ang nabuong listahan sa isang hiwalay na html file. Susunod, lumikha ng isang file na may isang extension na.css at ipasok ang lahat ng mga parameter ng style sheet.
Hakbang 3
Alisin ang anumang padding at mga bala na nalalapat sa listahan ng bala at itakda ang lapad ng menu gamit ang mga tool ng CSS: ul {list-style: none;
lapad: 200px; }
Hakbang 4
Itakda ang kamag-anak na posisyon ng lahat ng mga item sa listahan gamit ang katangiang posisyon: ul li {posisyon: kamag-anak; }
Hakbang 5
Susunod, kailangan mong mag-disenyo ng isang submenu, bawat isa sa mga elemento na lilitaw sa kanan ng menu ng magulang sa sandaling ito kapag ang mouse pointer ay nasa item: li ul {posisyon: absolute;
kaliwa: 199px;
itaas: 0;
ipakita: wala; } Ang kaliwang katangian ay isang pixel na mas mababa sa lapad ng menu mismo. Pinapayagan nito ang mga pop-up na item na maiposisyon nang buong talino nang hindi lumilikha ng mga dobleng hangganan. Ginagamit ang katangian ng display upang itago ang submenu kapag binubuksan ang pahina.
Hakbang 6
Estilo ang mga link ayon sa ninanais gamit ang naaangkop na mga pagpipilian sa css. Isama ang display: parameter ng pag-block upang ang bawat link ay tumatagal ng lahat ng puwang na nakalaan nito para dito.
Hakbang 7
Upang maipakita ang menu sa sandaling ito ay nasa ibabaw nito (i-hover), kailangan mong ipasok ang code: li: hover ul {display: block; }
Hakbang 8
Magtakda ng mga karagdagang pagpipilian para sa pagpapakita ng mga link at listahan ng mga item ayon sa ninanais.
Hakbang 9
Handa na ang pop-up menu. Ngayon ay nananatili itong isama ang katangian sa.html file: Pop-up menu
