Mwongozo wa hatua kwa hatua
Ikiwa orodha yako ya urambazaji ni safu ya usawa juu au mstari wa wima chini upande, bado ni orodha tu. Wakati wa kubuni urambazaji wa wavuti, mara nyingi ni rahisi kusahau kuwa orodha ya urambazaji ni kundi la utukufu la viungo. Lakini ukitengeneza urambazaji wako ukitumia XHTML + CSS, unaweza kuunda orodha ambayo ni ndogo ya kupakua (XHTML) na rahisi kuifanya (CSS).
Kuanza
Kuanza kubuni orodha ya urambazaji, unahitaji kutumia orodha.
Huenda ikawa orodha isiyo ya kawaida ambayo imejulikana kama urambazaji:
Ikiwa unatazama kwa karibu kwenye HTML, utaona kuwa kiungo cha "Nyumbani" pia kina ID ya usio. Hii itawawezesha kuunda orodha ambayo inabainisha eneo la sasa kwa wasomaji wako. Hata kama huna mpango wa kuwa na aina hiyo ya kutazama kwenye tovuti yako hivi sasa, unaweza kuingiza taarifa hiyo. Ukiamua kuongezea baadaye, utakuwa na coding kidogo ili kuandaa tovuti yako.
Bila styling yoyote ya CSS , orodha hii ya XHTML inaonekana kama orodha isiyo ya kawaida. Kuna vipaji na vitu vya orodha vimefungwa kidogo. Kwa sababu ninatumia viungo vya mahali , vivinjari vingi havitaonyesha viungo kama clickable (iliyoelezwa na katika bluu). Ikiwa utaweka kwenye HTML hapo juu kwenye ukurasa wa wavuti, urambazaji wako utaonekana kama hii:
- Nyumbani
- Bidhaa
- Huduma
- Wasiliana nasi
Hii ni boring nzuri na haionekani kama orodha. Lakini kwa mitindo michache ya CSS iliyoongezwa kwenye orodha, unaweza kuunda orodha ambayo inakufanya ujivunia.
Menyu ya Upeo wa Upepo
Menyu ya urambazaji ya wima ni rahisi sana kuandika kwa sababu inaonyesha kwa njia sawa na orodha ya kawaida: juu na chini.
Vipengee vya orodha vinaonyesha vyema chini ya ukurasa.
Ninapopenda menyu, napenda kuanza nje na kufanya kazi. Kwa hili, nina maana kwamba mimi ni mtindo wa kwanza urambazaji wa # na kisha nenda kwa vipengele vya li na kisha viungo, nk. Kwa orodha hii, kwanza unaweza kufafanua upana wa menyu. Hii itahakikisha kwamba hata kama vitu vya menyu vidumu, hawatashikilia mapumziko ya mpangilio juu au kusababisha usawa wa usawa.
ulinzi wa # # upana: 12m; }
Mara baada ya kupata upana, ninaweza kucheza na vitu vya orodha. Hii inaniwezesha kuweka vitu kama (kuondosha risasi), rangi ya background, mipaka, usawa wa maandishi, na vijiji.
ul # urambazaji li {
orodha ya orodha: hakuna;
rangi ya background: # 039;
mpaka-mpaka: imara 1px # 039;
salama-maandishi: kushoto;
margin: 0;
}
Mara baada ya kuweka msingi kwa vitu vya orodha unaweza kuanza kucheza na jinsi menu inavyoonekana katika eneo la viungo. Mtindo wa kwanza UL # urambazaji LI A na kisha A: kiungo, A: alitembelea, A: hover, na A: kazi (ikiwa unataka). Kwa viungo, napenda kufanya viungo kipengele cha kuzuia (badala ya mstari wa default). Hii inawawezesha kuchukua nafasi nzima ya LI-na wanafanya zaidi kama kifungu, ambacho huwafanya iwe rahisi kuwa mtindo kama vifungo vya menyu. Kitu kingine ninachofanya mara zote ni kuondoa mstari wa chini (maandiko-mapambo: hapana;), kama hii inafanya vifungo vifanye vifungo zaidi kwangu.
Lakini bila shaka, kubuni yako inaweza kuwa tofauti.
ul # urambazaji {
kuonyesha: kuzuia;
maandishi-mapambo: hakuna;
padding: .25m;
mpaka-chini: imara 1px # 39f;
mpaka-kulia: imara 1px # 39f;
}
Ona kwamba kwa kuonyesha: kuzuia; kuweka kwenye viungo, sanduku zima la kipengee cha menu ni clickable, sio tu barua. Hii pia ni nzuri kwa usability. Hakikisha kuweka rangi zilizounganishwa (kiungo, kutembelea, hover na kazi) ikiwa unataka wawe tofauti na rangi ya bluu isiyo na rangi, nyekundu na zambarau.
: kiungo,: alitembelea {rangi: #fff; }
: hover, a: kazi {rangi: # 000; }
Mimi pia napenda kutoa hali ya hover kidogo zaidi kwa kubadilisha rangi ya nyuma.
: hover {background-color: #fff; }
Ikiwa ungependa mifano zaidi ya menus wima, wasiliana na orodha hapa chini.
- Menyu ya Vertical Styled
- Kigezo cha Msingi cha Menyu ya Msingi
- Mchoro wa Vertical Menu na Wewe Hapa
- Kigezo cha Mstari wa Mstari wa Mstari na Wewe Hapa
Menyu ya Navigation ya Ulalo
Kujenga menyu ya usawa wa usawa ni vigumu kidogo kuliko menyu ya urambazaji wima kwa sababu unapaswa kukomesha ukweli kwamba orodha za HTML zinapendelea kuonyesha wima. Kama na orodha ya usawa, kwanza uunda orodha yako ya orodha ya urambazaji :
Ili kuunda orodha ya usawa, fanya sawa na wewe ulivyofanya na orodha ya wima. Anza na nje na uingie. Kwa kuwa nataka urambazaji wangu uanze kwenye kona ya kushoto, nimeiweka na margin ya kushoto na padding, na mimi huielekea upande wa kushoto. Unapaswa pia kupata tabia ya kuweka upana ili orodha yako iingie nafasi ya chini zaidi kuliko unayotaka. Kwa menyu ya usawa, hii ni kawaida upana kamili wa kubuni. Niliongeza rangi ya background kwenye orodha nzima ili iwe rahisi kusoma.
ul # urambazaji {
kuelea: kushoto;
margin: 0;
padding: 0;
upana: 100%;
rangi ya background: # 039;
}
Lakini siri ya orodha ya usawa ya urambazaji iko kwenye vitu vya orodha. Orodha ya orodha ni kawaida kuzuia mambo, ambayo ina maana kwamba watakuwa na lineline kuwekwa kabla na baada ya kila mmoja. Kwa kubadili maonyesho kutoka kwa block hadi kwa inline, unasisitiza vipengele vya orodha ili kuunganisha karibu na mtu mwingine kwa usawa.
ul # urambazaji li {kuonyesha: inline; }
Nilitibiwa viungo hasa kama nilivyowatendea kwenye orodha ya urambazaji wima, na rangi sawa na mapambo ya maandiko. Niliongeza mpakani wa juu ili kufuta vifungo wakati wao hupigwa juu. Kitu pekee nilichotoa ni kuonyesha: kuzuia; kama hiyo itaweka vifungu vya habari nyuma na kuharibu orodha ya usawa.
ul # urambazaji {
maandishi-mapambo: hakuna;
padding: .25m 1m;
mpaka-chini: imara 1px # 39f;
mpaka-mpaka: imara 1px # 39f;
mpaka-kulia: imara 1px # 39f;
}
: kiungo,: alitembelea {rangi: #fff; }
ul navigation # li: hover {
rangi ya background: #fff;
rangi: # 000;
}
Wewe ni Hapa Maelezo ya Eneo
Kipengele kingine cha HTML ni kitambulisho chako. Ikiwa unataka kurekebisha orodha yako ili kuonyesha eneo la sasa la watumiaji wako, tu kutumia ID hii ili kufafanua rangi tofauti ya asili au mtindo mwingine. Hoja kitambulisho hiki kwenye kipengee cha orodha sahihi kwenye kurasa zingine ili ukurasa wa sasa umeonyeshwa daima.
ul # urambazaji li # usiye na {background-color: # 09f; }
Ikiwa utaweka mitindo hii pamoja kwenye ukurasa wako, unaweza kuunda bar ya menyu ya usawa au ya wima ambayo inafanya kazi na tovuti yako lakini inakupakua kupakua na rahisi sana kusasisha baadaye. Kutumia XHTML + CSS inarudi orodha yako kuwa chombo chenye nguvu sana cha kubuni.
Ikiwa ungependa mifano zaidi ya menyu ya usawa, wasiliana na yafuatayo.
- Menyu ya Styled Horizontal
- Msingi Kigezo cha Menyu ya Msingi
- Menyu ya Styled Horizontal na Wewe Hapa
- Kigezo cha Msingi cha Menyu ya Msingi na Wewe Hapa