Paano gumawa ng isang drop-down na CSS menu

pagtuturo

Una, sabihin maunawaan kung ano ang isang drop-down na menu. Sa ilalim ng kahulugan na ito ay makakakuha ng maraming iba't ibang mga paraan paggawa ng iba't ibang mga layout. Sa kasong ito, kami ay pag-aralan ang isang istraktura na binubuo ng ilang mga patuloy na nakikitang mga item at ilang mga karagdagang (nakatago). tapusin na may mga teorya at magsimulang magsanay Hayaan.

• lumikha namin ang layout ng aming menu. Upang gawin ito, HTML-code label. Gumawa ng isang nested list:
  • • < / ul>. Isang bagay na tulad nito ay dapat magmukhang ang iyong drop-down na menu. CSS upang mamagitan sa ibang pagkakataon. Sa kasong ito ang pangunahing listahan ay binubuo ng tatlong pangunahing mga lugar at dalawang kalakip.
    • Itago ang mga sub-menu. Dahil ginagamit namin ang isang stylesheet, tukuyin ang mga sumusunod na katangian: ul ul {display: none;} Aalisin nito ang mga elemento ng pangalawang listahan mula sa screen.
    • Gumawa ng isang menu CSS, drop down mula sa pangunahing listahan. Ang cascading style sheet isulat ang mga sumusunod na patakaran: ul li: i-hover ul {display: block;}. Ang entry na ito ay nangangahulugan na kapag ang mouse ay higit sa elemento li, na kung saan ay matatagpuan sa ul listahan ay lilitaw sa ul screen (nakalakip). Sa unang tingin, tulad ng isang pamamaraan ay maaaring mukhang kumplikado at nakalilito. Ngunit sa katunayan, lahat ng bagay ay napaka-simple.
    • Gamitin ang layout ng iyong sarili sa pamamagitan ng pagpasok ng mga tag
    • ang iyong nilalaman. Maaari mong baguhin ang bilang ng mga elemento listahan.

    mapalamuting pagbabago

    Sa sandali na ang layout ng main menu ay handa na, maaari kang magpatuloy sa pagpaparehistro. Marahil, marami sa simula handa sa kumuha alisan ng mga marker na nagpapahiwatig ng item sa listahan. Ginagawa ito gamit ang isang solong ari-arian ng CSS, lalo listahan-style-uri. Kailangan mong idagdag ang sumusunod na entry: li {listahan-style-type: none;}. Pagkatapos ay maaari mong ipasok ang frame at gumawa ng background. Ang hangganan at background tulungan ka sa ito. Marahil ang ilan ay hindi gusto ang mga pull-down menu ay lilitaw bilang isang karagdagang listahan, pagtulak sa parehong mga pangunahing elemento. Upang ayusin ito, maaari mong iposisyon ang mga ito. Upang gawin ito, cascading style sheet isulat ang sumusunod na entry: ul ul {position: absolute; kaliwa: 15px; kanan: 15px; top: 15px; bottom: 15px;}. Of course, ang mga halaga gagamitin mo ang iyong sarili. Depende sa kung saan mo nais na makita ang drop-down na menu, CSS ay mag-aalok ng maraming mas maraming mga tampok na maaaring magdagdag ng iba't-ibang mga epekto at dekorasyunan aming mga listahan.

    konklusyon

    Muli ito ay nagkakahalaga ng pagpuna ang konstruksiyon ng ang layout ng menu. Upang magtalaga ng mga panuntunan CSS na ginagamit sa kaso na naka-embed ang halaga na ito, halimbawa, ul ul. Kung ikaw ay sa dokumento upang matugunan ang iba pang mga katulad na istraktura, maaaring may malaking problema. Sa mga sitwasyong ito, kailangan mong gumamit ng isang tiyak na layunin, halimbawa, tagapili o id-ID. Ang itaas na artikulo layout drop-down na menu ay dinisenyo upang maging pamilyar sa pangkalahatang disenyo. Ang natitirang bahagi ng trabaho rests sa iyong balikat.