Paano Gumawa Ng Isang Patayong Dropdown Menu

Talaan ng mga Nilalaman:

Paano Gumawa Ng Isang Patayong Dropdown Menu
Paano Gumawa Ng Isang Patayong Dropdown Menu

Video: Paano Gumawa Ng Isang Patayong Dropdown Menu

Video: Paano Gumawa Ng Isang Patayong Dropdown Menu
Video: Text field implementing dropdown menu Android Studio 2024, Mayo
Anonim

Ang patayong dropdown menu ay napaka-madaling gamiting - nakakatipid ito ng puwang sa web page, habang sa parehong oras ay tumutulong upang madaling ma-navigate ang site. Subukang gumawa ng isang dropdown na menu batay sa CSS - Mga Cascading Style Sheet. Kung hindi ka pa dalubhasa sa paglikha ng CSS code, pagkatapos ay gamitin ang serbisyo na purecssmenu.com. Kinakailangan kang pumili ng isang uri ng menu, ipasadya ang hitsura nito, at pagkatapos ay iakma ito sa iyong sariling site. Ang serbisyo mismo ay bubuo ng kinakailangang code, na pagkatapos ay isingit mo sa mga file ng iyong site.

Paano gumawa ng isang patayong dropdown menu
Paano gumawa ng isang patayong dropdown menu

Panuto

Hakbang 1

Magrehistro sa website purecssmenu.com, kung hindi man ay hindi mo ma-download ang nilikha na menu. I-click ang mga pindutan ng Mga Template sa kaliwang bahagi ng pahina. Sa ibaba makikita mo ang maraming maliliit na bintana na may mga drop-down na template ng menu, na pag-click sa kung aling maglo-load ng isang preview sa kanan sa window ng Preview. Pumili ng isang template na nababagay sa iyong site

Hakbang 2

Ipasadya ang font at kulay ng menu: gamitin ang tab na Mga Parameter. Sa patlang ng Font, pumili ng isang font, laki ng font, kung kinakailangan, salungguhitan at naka-bold. Sa patlang ng Mga Kulay, itakda ang background ng menu, kulay ng font, at mga font hover at mga kulay ng hover sa background

Hakbang 3

Buksan ang tab na Mga Item upang pamahalaan ang mga item sa menu. Kung na-click mo ang button na I-clear ang recycle bin, ang mga sample na item ay malinis at maaari kang lumikha ng iyong sarili. Upang magawa ito, pindutin ang button na Magdagdag ng Item plus - idaragdag ang item sa dulo ng menu. Ang pindutang Idagdag ang Susunod na Item ay ginagamit upang magdagdag ng isang item kasunod ng kasalukuyang napiling oras. Ang pindutang Magdagdag ng Subitem ay lumilikha ng isang item na sub-menu para sa pagpipilian. Alinsunod dito, upang alisin ang isang item, gamitin ang pindutan na Alisin ang Item

Hakbang 4

Magbayad ng pansin sa patlang ng Mga Parameter ng Item sa ilalim ng site. Sa linya ng Teksto, tukuyin ang pangalan ng item sa menu, sa linya ng Link - ang url ng pahina kung saan hahantong ang item na ito. Sa linya ng Tip, maaari kang mag-iwan ng isang paglalarawan ng item, na ipapakita kapag nag-hover ka sa link. Ginagamit ang linya ng Target upang matukoy ang paraan upang buksan ang pahina kung saan patungo ang link. Ang _ parameter ng sarili sa linyang ito ay magbubukas ng pahina sa parehong window ng browser bilang kasalukuyang

Hakbang 5

Matapos matapos ang pag-set up ng menu, i-download ito - i-click ang pindutang Mag-download sa kanang bahagi sa ibaba ng pahina (magagamit ang pagpapaandar na ito pagkatapos magrehistro sa site). Pumili ng isang folder sa iyong hard drive kung saan mai-save ang file ng archive. I-unpack mo ito Kakailanganin mong kopyahin ang kinakailangang code mula sa purecssmenu.html file sa CSS template file ng iyong site. Buksan ang purecssmenu.html file na may isang text editor at kopyahin ang code sa pagitan ng mga at mga tag sa template ng CSS ng iyong site (ang file na ito ay may isang extension na.css at mukhang isang file.css). I-paste ngayon ang code sa iyong template ng site (mga tema) na file - ang code mula sa purecssmenu.html sa pagitan ng mga komento at sa halip na ang regular na code ng menu. Upang magawa ito, kailangan mong maging pamilyar sa kaunting pamilyar sa pagprograma. Tiyaking i-paste ang code sa tamang file at i-save.

Inirerekumendang: