Nilalaman

• Mga hakbang
• Payo
• Babala

Itinuturo sa iyo ng wikiHow na ito kung paano lumikha ng mga drop-down na menu sa iyong website gamit ang HTML at CSS code. Lilitaw ang isang drop-down na menu kapag pinapaikot ng bisita ang mouse pointer sa tinukoy na pindutan; Susunod, maaari silang mag-click sa isa sa mga item upang pumunta sa website ng opsyong iyon.

Mga hakbang

1. 

   Buksan ang editor ng teksto ng HTML. Maaari mong gamitin ang isang simpleng text editor (Notepad, TextEdit) o ​​mas advanced (Notepad ++).
   • Kung magpasya kang pumunta sa Notepad ++, kailangan mong pumili HTML mula sa "H" na bahagi ng menu Wika (Wika) sa tuktok ng window bago magpatuloy.

2. 

   
   
   Maglagay ng pamagat para sa dokumento. Narito ang code na tumutukoy sa uri ng code na gagamitin para sa natitirang dokumento:

3. 

   Lumikha ng drop-down na menu. Ipasok ang sumusunod na code upang tukuyin ang laki at kulay ng drop-down na menu, tandaan na palitan ang "#" ng parameter na nais mong gamitin (mas malaki ang numero, mas malaki ang drop-down na menu). Maaari rin naming palitan ang kulay ng background na "background-color" at ang kulay na "color" ng kahit anong kulay (o HTML color code) na gusto mo:

4. 

   
   
   Tukuyin na nais mong palitan ang mga link sa drop-down na menu. Dahil magdaragdag ka pagkatapos ng mga link sa menu, maaari mong palitan ang mga ito sa drop-down na menu sa pamamagitan ng pagpasok ng sumusunod na code:

5. 

   Lumilikha ng hitsura ng drop-down na menu. Tinutukoy ng sumusunod na code ang laki at kulay ng drop-down na menu, kasama ang posisyon kapag isinama sa iba pang mga elemento sa web page. Huwag kalimutang palitan ang "#" sa seksyong "min-width" sa bilang na nais mo (hal. 250) at palitan ang "background-color" (kulay ng background) header sa isang tukoy na kulay o HTML code:

6. 

   
   
   Magdagdag ng mga detalye sa mga nilalaman ng drop-down na menu. Tutukuyin ng sumusunod na code ang kulay ng teksto sa loob at ang laki ng drop-down na pindutan ng menu. Huwag kalimutang palitan ang "#" ng bilang ng mga pixel na tumutukoy sa laki ng pindutan ng menu:

7. 

   Ina-edit kung paano nagbabago ang mouse pointer kapag pinapasada sa drop-down na menu. Kapag pinapagod mo ang mouse pointer sa pindutan ng menu ang ilang mga kulay ay kailangang mabago. Ang linya ng "background-color" ay magpapakita ng kulay na binago kapag pumili ka ng isang bagay sa drop-down na menu, habang ang pangalawang linya ng "background-color" ay ang kulay na babaguhin ang menu button. Sa isip, ang parehong mga kulay na ito ay dapat na mas magaan kaysa noong sila ay hindi napili:

8. 

   Isara ang seksyon ng CSS. Ipasok ang sumusunod na code upang tukuyin na tapos ka na sa bahagi ng CSS ng dokumento:

9. 

   Lumikha ng isang pangalan para sa pindutan ng menu. Ipasok ang sumusunod na code ngunit tandaan na palitan ang "Pangalan" ng pangalan ng drop-down na menu button (halimbawa: Menu):

10. 

    Magdagdag ng mga link sa menu. Ang bawat item sa drop-down na menu ay mai-link sa isang bagay, maging isang pahina ito sa kasalukuyang website o isang panlabas na website. Idagdag ang iyong pagpipilian sa drop-down na menu sa pamamagitan ng pagpasok ng sumusunod na code, kung saan kailangan mong palitan https://www.website.com gamit ang link address (panatilihin ang panaklong) at palitan ang "Pangalan" ng pangalan ng link.

11. 

    Isara ang dokumento. Ipasok ang mga sumusunod na tag upang isara ang dokumento at tukuyin ang dulo ng code ng drop-down na menu:

12. 

    Tinutukoy ng code ng pagsusuri ang drop-down na menu. Ang snippet ay magmumukhang ganito: Mga ad

Payo

• Palaging suriin ang code bago mag-post sa website.
• Ang mga tagubilin sa itaas ay para sa mga drop-down na menu na gagana kapag pinapagod mo ang mouse pointer sa pindutan ng menu. Kung nais mong lumikha ng isang drop-down na menu na nag-click lamang kapag nag-click ka, kailangan mong gumamit ng JavaScript.

Babala

• Ang pagkulay ng HTML ay lubos na limitado kapag gumagamit kami ng mga tag tulad ng "itim" o "berde". Maaari mong suriin ang tagabuo ng code ng kulay ng HTML na nagbibigay-daan sa mga gumagamit na lumikha at gumamit ng mga pasadyang kulay dito.