Jagoran mataki na gaba daya
Ko maɓallin kewayawa shi ne jere a kwance a sama ko a tsaye a gefen gefe, har yanzu akwai jerin. Lokacin tsara zanewar yanar gizon, yana da sauƙin saukewa cewa menu na maɓallin kewayawa kawai ƙungiyar haɗin kai ne mai ɗaukaka. Amma idan kuka shirya shirinku ta hanyar amfani da XHTML + CSS, za ku iya ƙirƙirar menu wanda yake ƙarami don saukewa (XHTML) kuma mai sauki don tsarawa (CSS).
Farawa
Don fara zayyana jerin kewayawa, kana buƙatar amfani da jerin.
Yana iya kasancewa jerin daidaitattun daidaito da aka gano a matsayin maɓallin kewayawa:
Idan ka duba a cikin HTML, za ka lura cewa mahaɗin "Home" yana da ID na youarehere. Wannan zai ba ka izinin ƙirƙirar menu da ke gano wuri na yanzu don masu karatu. Ko da idan ba ku dagewa akan samun irin waɗannan abubuwa na shafinku a yanzu, za ku iya hada da wannan bayani. Idan ka yanke shawara don ƙara bayanin bayan haka, za ka sami ƙananan coding don shirya shafinka.
Ba tare da wani tsarin CSS ba , wannan tsarin XHTML yana kama da jerin marasa daidaito. Akwai harsasai da abubuwan da aka lissafa suna dan kadan. Saboda ina amfani da haɗin maƙunsar wuri , mafi yawan masu bincike ba za su nuna alamun a matsayin clickable (kaddamar da blue). Idan ka manna a sama HTML zuwa cikin Shafin yanar gizon, maɓallinka zai yi kama da wannan:
- Home
- Products
- Ayyuka
- Tuntuɓi Mu
Wannan kyauta ne mai ban sha'awa kuma bai yi kama da menu ba. Amma tare da kawai 'yan CSS styles da aka saka a cikin jerin, za ka iya ƙirƙirar menu da ke sa ka girman kai.
Maɓallin Kewayawa Vertical
Tsarin menu mai mahimmanci yana da sauƙin rubutawa domin yana nunawa a cikin hanya guda kamar yadda ya kamata: sama da ƙasa.
Jerin abubuwan da aka nuna a tsaye a shafin.
Lokacin da nake da menu na salo, ina so in fara a waje da aiki a ciki. Ta wannan, ina nufin cewa na fara da maɓallin kewayawa sannan sannan na motsa zuwa abubuwan haɗin da kuma hanyoyin, da dai sauransu. Saboda wannan menu, da farko ka ayyana fadin menu. Wannan zai tabbatar da cewa koda abubuwan menu suna dogon lokaci, baza su tura sauran sauran layout ba ko haifar da gungumen kwance.
ul # navigation {width: 12em; }
Da zarar na samu nisa, zan iya wasa tare da abubuwan lissafi. Wannan yana bani damar saita abubuwa kamar (don kawar da harsasai), launuka masu launi, iyakoki, daidaitaccen rubutu, da martaba.
ul # navigation a {
jerin-jerin: babu;
launin launi: # 039;
iyakar iyakar: m 1px # 039;
rubutu-align: hagu;
gefe: 0;
}
Da zarar ka saita kayan yau da kullum don jerin abubuwan da zaka iya fara wasa tare da yadda tsarin ke duba a cikin yanki. Hanya na farko da UL # kewayawa LI A sannan sannan A link: A: ziyarci, A: hover, da A: aiki (idan kana son su). Ga masu haɗin, Ina so in sanya haɗin haɗin maɓalli (maimakon tsohuwar layi). Wannan ya tilasta musu su dauki dukkan sararin LI-kuma suna aiki kamar sakin layi, wanda ya sa su sauƙi a matsayin salon zauren menu.Dayan wani abin da nake yi shine cire alamar layi (kyauta-rubutu: babu;), kamar yadda wannan ya sa maɓallan suka dubi ni da maɓalli.
Amma ba shakka, zane naka zai iya zama daban.
Tsarin gwiwar a cikin {
nuna: toshe;
kayan rubutu: babu;
kaddara: .25em;
iyaka-kasa: m 1px # 39f;
iyaka-dama: m 1px # 39f;
}
Ka lura cewa tare da nuni: toshe; saita a kan hanyoyin, duk akwatin na menu abu an clickable, ba kawai da haruffa. Wannan kuma yana da kyau don amfani. Tabbatar saita salororin mahaɗin (mahaɗi, ziyarci, ɓoyewa da aiki) idan kuna son su bambanta da tsoho blue, ja da m.
a: mahada, a: ziyarci {launi: #fff; }
a: hover, a: aiki {launi: # 000; }
Har ila yau ina so in ba da wata ƙasa ta hanyoyi ta hanyar canza launin launi.
a: hover {baya-launi: #fff; }
Idan kuna so karin misalai na menus na tsaye, tuntuɓi jerin da ke ƙasa.
- Aikin Gizon Wuta
- Kayan Shafin Farko na Asali
- Aiki mai Giraguwa tare da Kai Akwai A nan
- Kayan Shafin Farko na Mahimmanci tare da Kai Akwai A nan
Yanayin Maɓallin Tsallakewa
Samar da menu na maɓallin kewayawa ya fi wuya fiye da maɓallin kewayawa na tsaye saboda dole ne ka ƙaddara gaskiyar cewa HTML ya fi so fi nuna a tsaye. Kamar yadda menu na kwance, da farko ƙirƙira jerin menu na menu :
Don ƙirƙirar menu mai kwance, yi aiki kamar yadda kuka yi tare da menu na tsaye. Fara tare da waje da aiki a. Tun da na so na kewayawa don farawa a gefen hagu, na saita shi da gefen hagu na hagu da kuma nisa, kuma zan ninka shi a hagu. Har ila yau, ya kamata ka kasance cikin al'ada don saita nisa don menu naka ba ya karɓo sama da ƙasa da ƙasa fiye da yadda kake so. Don menus a kwance, wannan shi ne yawancin nuni na zane. Na kuma kara da launi mai launi ga dukan jerin don ya sauƙaƙe don karantawa.
ul # navigation {
taso kan ruwa: hagu;
gefe: 0;
Samun: 0;
nisa: 100%;
launin launi: # 039;
}
Amma asirin zuwa jerin menu na kwance a cikin jerin abubuwa. Abubuwan da aka lissafa suna adana abubuwa, wanda ke nufin cewa zasu sami sabon layi kafin da kuma bayan kowane ɗaya. Ta hanyar sauya allon daga toshe zuwa layi, zaku tilasta abubuwa masu jerin zuwa layi kusa da juna a sarari.
ul # navigation a {nuni: adadi; }
Na bi da hanyoyin daidai kamar yadda na bi da su a cikin menu na maɓallin kewayawa, tare da launuka iri ɗaya da kayan ado. Na kara da iyakar kan iyakoki don nuna maɓallin goge yayin da aka rufe su. Abinda na cire shi ne nuni: toshe; kamar yadda wannan zai sa sabon labaran ya dawo kuma ya halakar da menu na kwance.
Tsarin gwiwar a cikin {
kayan rubutu: babu;
kaddara: .25em 1em;
iyaka-kasa: m 1px # 39f;
iyakar iyakar: m 1px # 39f;
iyaka-dama: m 1px # 39f;
}
a: mahada, a: ziyarci {launi: #fff; }
ul # navigation a a: hover {
Ƙari-launi: #fff;
launi: # 000;
}
Kun kasance a nan bayanin wurin
Wani bangare na HTML shine mai ganowa na youarehere. Idan kana so ka gyara menu naka don nuna wuri na yanzu na masu amfani da ku, kawai amfani da wannan ID don ƙayyade launin launi daban-daban ko sauran salon. Matsar da alamar ID ɗin zuwa abin da ke daidai a kan wasu shafukan don a nuna alamar shafi na yau da kullum.
ul # navigation a # youarehere a {baya-launi: # 09f; }
Idan ka sanya waɗannan sifofi tare a shafinka, za ka iya ƙirƙirar barikin menu na kwance ko tsaye wanda ke aiki tare da shafinka amma yana da sauri don saukewa kuma sauƙin sauƙaƙe a nan gaba. Yin amfani da XHTML + CSS ya juya jerinka a cikin kayan aiki mai mahimmanci don zane.
Idan kuna so karin misalan menus a kwance, tuntuɓi wannan.
- Zaɓin Zaɓuɓɓuka Masu Gyara
- Kayan Shafin Menu na Gida
- Zaɓuɓɓukan Nuna Hanya tare da Kai Akwai A nan
- A samfurin Menu na Gida da ke Tsallake da Kai Akwai A nan