Vertical CSS menu: kufanya hivyo mwenyewe

Baadhi webmasters hawataki kutumia muda kuendeleza kutoka mwanzo mambo rahisi ambazo tayari zipo. Wao wanaamini kwamba hakuna uhakika katika kupoteza muda wako kitu ambacho kwa muda mrefu imekuwa huko. Kwa kweli, kwa wale ambao ni mastering tu HTML na CSS, ni muhimu kufanya wewe mwenyewe mambo mengi ya kuwa na uelewa mzuri wa kazi zao. Hii inatumika kwa menu. Kujenga menus wima CSS. Itakuwa msingi tu juu ya HTML na CSS, bila matumizi ya Javascript na JQuery. Kila menu ni orodha ya viungo kwamba kusababisha kurasa za tovuti.

hatua ya msingi

Kujenga rahisi wima menu CSS, unahitaji hatua zifuatazo:

1. Kwanza, kuamua orodha ya viungo (kwa kutumia kanuni HTML), ambayo orodha utakuwa. Wape jina, kwa mfano, ni kama ifuatavyo:

1. Nyumbani.
2. historia yetu.
3. Mwongozo.
4. Services.
5. Anwani.

2. Kisha Styling viungo kama unataka kwa msaada wa CSS.

Sisi kuandika HTML code, kuendelea my_Vmenu.html faili na kuona jinsi gani itakuwa kuangalia katika browser:

Hii ni ya msingi (mifupa) ya orodha yetu. # 1, # 2, nk lazima kubadilishwa na kumbukumbu. Angalia jinsi inaonekana katika browser. picha huwezi kama. Sasa ni lazima kuanza kuelezea vipengele vya mtindo, kufanya kamili wima menus CSS.

Maelezo mitindo

Kuunda faili my_Vmenu.css, ambayo kuweka kila kitu wanataka kuboresha muonekano wa vile kipengele muhimu ya tovuti. Hapa ni code, kuanzishwa kwa ambayo kuimarisha menus wima CSS. Ni na kuandika faili mpya, na kisha tutaweza kuangalia kwa karibu maana ya mistari kuu, ambazo huo.

KINA MAELEZO kutumika XSLT

Sasa fikiria maelezo ya CSS orodha yetu wima:

orodha-style-aina utapata kuondoa orodha ya alama. Kwa kuweka "0" kwa kiasi na padding kuondoa padding ziada katika orodha. Kama inavyoweza kuonekana kutoka code HTML, menu yetu ni orodha, na mitindo hufafanuliwa kwa kutumia CSS.

ul # my_Vmenu - mtindo wa jumla wa orodha nzima.

ul # my_Vmenu li a - style uhusiano kati ya tag li.

ul # my_Vmenu li a: hover - Maelezo ya aina chini ya kuzingatia vitu menu wakati mmoja hovers juu ya watu.

ul # my_Vmenu li span - Ufafanuzi wa matini (jina orodha).

Kumbuka kwamba faili my_Vmenu.css my_Vmenu.html na lazima kulindwa katika orodha hiyo. Hata hivyo, wanaweza kuwa katika folda tofauti, lakini ni muhimu kwa kujiandikisha katika my_Vmenu.html faili njia ya my_Vmenu.css. Kuwa makini, kwa sababu wageni kwa tatizo hili mara kwa mara.

Style ziwe zimeunganishwa kati vitambulisho kichwa katika html-file. menu_1.png na menu_2.png - hii ni picha kwa picha menyu katika hali ya kawaida na hover.

Ni bora kuokoa picha katika folder tofauti kwa picha, jina hilo my_images, lakini Kurekebisha CSS code. Andika ambapo picha hizi ni umeonyesha, ni katika orodha hii: url (my_images / menu_1.png) na url (my_images / menu_2.png).

Katika maeneo mengine ya mali ilivyoelezwa katika CSS code, kuelewa kwa urahisi. Wao kufafanua muonekano wa orodha yetu. Ni rahisi kwa taarifa kuwa upana na urefu wa vitu maalum kwa vitu hivyo katika hali ya kawaida, na wakati hover mouse juu yao. Ukubwa wa herufi 18px, padding bayana indentation kutoka pande mbalimbali za majina ya mahali. kuonyesha inakuwezesha kuweka kuonyesha kitengo kuweka upana na padding.

Orodha yetu wima

Kama unavyoona, wima menus CSS kujenga kwa urahisi. Juu ya msingi wa data wa maarifa na uwezo wa kufanya hivyo nzuri na ya kuvutia kwa wageni na tovuti yako! Kutumia mawazo yako, na kisha orodha maridadi inayosaidia tovuti yako.