Computer, Software
Indlela yokwenza ukuwa-phantsi menu CSS
Namhlanje siza kuqwalasela umbuzo othi "Ngaba ndidala njani ukuwa-phantsi menu CSS?". Kufuneka athi kwaoko ukuba le nto iza kwenziwa ngaphandle uqhagamshela naziphi na iimali ezongezelelweyo. Oko kukuthi, le menu iza kwenziwa kuphela CSS kunye HTML.
uqeqesho
ukuqonda oko kwinqaku Ukuze ngokupheleleyo, ufuna kancinane simazi kakuhle izinto theoretical component. Kambe ke, ukuba uqhelene pseudo-iiklasi, ungatsiba lo mhlathi. Ngoko ke, ukwakha nkqo drop-phantsi CSS iimenu, kufuneka i element njengoko «: hambisa». I pseudo «: misa» linokukwenziwa kuyo nayiphi tag HTML. It ikuvumela ukuba ukuchaza lo mzuzu xa kukho into Beka mouse yakho. Ngokomzekelo, siqeshe ipropati: «i: misa {umbala: obomvu;}». Le entry kuthetha ukuba xa uhambisa i mouse ukuba bomvu ngokuqulethwe nayiphi tag. Kubalulekile ukuqaphela ukuba le pseudo-element nalo inactivated. Hi ndlela leyi, «: misa» lo ukucacisile izinto ezifanayo. Kodwa kule siza kudala pseudo CSS drop-down menu.
umyalelo
Okokuqala, makhe baqonde ukuba yintoni na ukuwa-phantsi menu. Phantsi kwale nkcazo ufumana eninzi iindlela ezahlukeneyo yokwakha izakhiwo ezahlukeneyo. Kulo mzekelo, siza bahlalutye isakhiwo lwezinto rhoqo ezibonakalayo eziliqela kunye ezongezelelweyo eziliqela (efihlakeleyo). Makhe kwayekwa theory aze aqalise ukwenza.
- Thina ukudala ubeko lwe menu yethu. Ukuze wenze oku, HTML-ikhowudi zokuphawula. Yenza uluhlu ekwiseli:
-
- < / ul>. Into efana oku kufuneka ikhangeleke ngolu drop-down menu yakho. CSS ukuba angenelele kamva. Kulo mzekelo uluhlu ephambili ibandakanya iinkalo ezintathu ezingundoqo kunye ezimbini azifakwanga.
- Fihla i sub-menu. Kuba oku sisebenzisa kwikhasi lohlobo, ukuchaza iimpawu zilandelayo: ul ul {umboniso: akukho;} Oku kuzakususa iziqalelo uluhlu yesibini ukusuka screen.
- Yenza i CSS menu, iwe phantsi kuluhlu engundoqo. Le Uhlobo lwamakhasi ayingxangxasi bhala ulawulo ilandelayo: ul li: hambisa ul {umboniso: block;}. Le entry kuthetha ukuba xa mouse phezu li element, nto leyo ibekwe kuluhlu ul kuvela kwi ul screen (eqhotyoshelweyo). Xa uqala, ulungiselelo enjalo ibonakale inzima yaye bedidekile. Kodwa enyanisweni, yonke into ilula kakhulu.
- Sebenzisa oku layout ngokwakho ngokufaka iitags
- umxholo wakho. Ungatshintsha inani uluhlu lweziqalelo.
utshintsho zokuhombisa
Kamsinya nje ubeko main menu ilungele, unako uqhubeke ubhaliso. Mhlawumbi, abantu abaninzi kuloo ndawo yokuqala abazimisele ukuphelisa yabamakishi ebonisa umba kuluhlu. Oku kwenziwa ngokusebenzisa i CSS endaweni eyodwa, ezizezi uluhlu-isimbo-hlobo. Kufuneka wongeze i entry ilandelayo: li {uluhlu-style-type: namnye;}. Ngoko unako ukufaka isakhelo kwaye wenze le imvelaphi. Umda kunye nemvelaphi ukukunceda malunga noku. Mhlawumbi abanye ungathandi kuya kuvela tsala-phantsi imenu njengento uluhlu ezongezelelweyo, ukutyhala kwi izinto ezifanayo. Ukulungisa oku, unako uyimise. Ukuze wenze oku, Uhlobo lwamakhasi ayingxangxasi bhala entry ilandelayo: ul ul {indawo: ingundoqo; ngasekhohlo: 15px; ekunene: 15px; top: 15px; ezantsi: 15px;}. Kakade ke, iinqobo uya kusebenzisa eyakho. Kuxhomekeka apho ufuna ukubona emenu eziwe-phantsi, CSS izakunika iimpawu ezininzi ngakumbi ukuba Ungadibanisa iziphumo ezahlukeneyo uhombise uluhlu zethu.
isiphelo
Kwakhona kubalulekile ukukhumbula ulwakhiwo layout menu. Ukwabela imithetho CSS esetyenzisiweyo kulo ixabiso mzekelo eqhagamshelweyo, umzekelo, ul ul. Ukuba ngaba uxwebhu ukuhlangabezana ezinye isakhiwo esifanayo, babe neengxaki ezinkulu apho. Kwezi meko, kufuneka usebenzise injongo ethile, umzekelo, selectors okanye id-ID. Eli nqaku ubeko drop-down menu ngasentla yenzelwe ukuba luqhelanise kuyilo jikelele. Ezinye umsebenzi esemagxeni zakho.
Similar articles
Trending Now