Ginagamit ang menu upang mapadali ang pag-navigate ng gumagamit sa pamamagitan ng mga seksyon sa site. Upang maakit ang pansin ng bisita, ang menu ay dapat na functional, madaling gamitin at sa parehong oras ay isinasama sa disenyo ng buong mapagkukunan.
Panuto
Hakbang 1
Bago lumikha ng isang menu, magpasya sa uri nito. Maaari kang lumikha ng isang drop-down na pahalang o patayong kahon na ipapakita sa gumagamit kapag ang gumagamit ay lumipat dito gamit ang mouse cursor. Kapag pumipili ng isang partikular na menu, maaari kang magabayan ng kung maginhawa para sa mga bisita na gamitin ito at kung paano ito isasama sa disenyo.
Hakbang 2
Matapos pumili ng isang uri ng menu, buksan ang iyong file ng pahina gamit ang anumang text editor na iyong ginagamit upang mai-edit ang HTML. Mag-navigate sa nais na seksyon ng code kung saan mo nais na ipasok ang iyong elemento ng interface.
Hakbang 3
Pagkatapos nito, gumawa ng isang listahan ng mga pagpipilian sa pamamagitan ng paglikha ng isang bloke at paggawa ng isang may bilang na listahan na may id na nakatalaga dito. Halimbawa:
- Link 1
- Link 2
- Link 3
Sa halimbawang ito, lumikha ako ng isang naka-bulletin na listahan ng tatlong mga elemento at inilagay ito sa isang layer ng div na may ID panel ID.
Hakbang 4
Pumunta sa seksyon ng bloke ng iyong pahina at lumikha ng naaangkop na menu ng style ng cascading style. Kung nais mong lumikha ng isang pahalang na menu, maaari mong isama ang inline na katangian para sa nagresultang listahan:
#panel ul li {display: inline; }
Hakbang 5
Upang lumikha ng isang pahalang na linya kasama ang buong haba ng pahina, maaari mong gamitin ang sumusunod na code:
#panel ul {margin-left: 0; padding: 2px 0; }
Hakbang 6
Pagkatapos ay maaari mong gawin ang visual na dibisyon sa mga parihaba:
#panel ul li a {margin-left: 3px; hangganan: 1px; padding: 2px 3px; background: asul; }
Nagtatakda ang code na ito ng mga indent ng teksto mula sa mga elemento ng hangganan sa pamamagitan ng mga katangian ng kaliwa at padding, at nagtatakda din ng kulay ng background para sa bawat isa sa mga item sa listahan. Sa halimbawang ito, ang kulay ay asul, ngunit maaari mo itong baguhin sa iyong sariling paghuhusga.
Hakbang 7
Upang ituro ang item sa kasalukuyang pahina na napili sa tab, itakda ang naaangkop na mga parameter sa bukas na klase:
#menu ul li a # bukas {background: pula; border-ilalim: 1px; }
Ang kasalukuyang pahina na napili sa panel ay ipapakita sa pula.
Hakbang 8
I-save ang mga pagbabago sa file at suriin ang pag-andar ng nakasulat na code sa pamamagitan ng pagbubukas ng iyong pahina sa pamamagitan ng isang browser. Upang magtakda ng mga karagdagang pagpipilian sa pagpapakita, maaari mong palaging magdagdag ng CSS o HTML upang mapagbuti ang hitsura ng object.
