Menu CSS vertikali: tagħmel it yourself

Xi webmasters ma jridux li jqattgħu ħin jiżviluppaw minn elementi sempliċi bidu nett li diġà jeżistu. Huma jemmnu li m'hemm l-ebda punt fl ħela ta 'ħin tiegħek fuq xi ħaġa li ilha hemm. Fil-fatt, għal dawk li huma biss nikkontrollaw HTML u CSS, huwa importanti li tagħmel lilek innifsek ħafna affarijiet li jkollhom għarfien tajjeb tax-xogħol tagħhom. Dan japplika għall-menu. Oħloq menus CSS vertikali. Se jkun ibbażat biss fuq HTML u CSS, mingħajr l-użu ta 'Javascript u JQuery. Kull menu hija lista ta 'links li jwasslu għal paġni tas-sit.

passi bażiċi

Biex jinħoloq sempliċi vertikali menu CSS, għandek bżonn l-passi li ġejjin:

1. L-ewwel, tiddetermina lista ta 'links (bl-użu HTML code), li minnhom il-menu se jkun. Tagħtihom isem, per eżempju, huma kif ġej:

1. Dar.
2. istorja tagħna.
3. Gwida.
4. Servizzi.
5. Kuntatti.

2. Imbagħad Styling rabtiet kif tixtieq bl-għajnuna ta CSS.

Aħna tikteb l -HTML code, jżomm fil-fajl my_Vmenu.html u tara kif se tfittex fil-browser:

Dan huwa l-bażi (iskeletru) tar-menu tagħna. # 1, # 2, eċċ għandha tiġi sostitwita b'referenza. Tara kif jidher fil-browser. L-istampa inti mhux ser simili. Issa rridu jibdew jiddeskrivu l-elementi ta 'stil, li tagħmel menus komplet CSS vertikali.

stili Deskrizzjoni

Toħloq fajl my_Vmenu.css, li jistabbilixxu kollox inti tixtieq li ttejjeb id-dehra ta 'tali element importanti tas-sit. Hawnhekk huwa l-kodiċi, l-introduzzjoni ta 'li se terga l-menus CSS vertikali. Hija u jiktbu l-fajl ġdid, u mbagħad aħna ser tagħti aktar mill-qrib ħarsa it-tifsira tal-linji ewlenin li huma mogħtija.

DESKRIZZJONI DETTALJATA użat stylesheet

Issa jqisu d-dettalji ta 'CSS menu vertikali tagħna:

lista stil-tip jippermettilek li tneħħi l-lista ta 'markaturi. Bl-iffissar "0" għall-marġni u padding neħħi l-ikkuttunar żejda fil-lista. Kif jidher mill-kodiċi HTML,-menu tagħna hija lista, u l-istili huma definiti bl-użu CSS.

ul # my_Vmenu - l-istil globali tal-lista sħiħa.

ul # my_Vmenu LI a - rabtiet stil bejn l-li tag.

ul # my_Vmenu LI a: imbagħad jerġgħu - deskrizzjoni tat-tip in kwistjoni ta 'oġġetti menu fi żmien meta wieħed hovers fuq in-nies.

ul # my_Vmenu LI medda - deskrizzjoni test (menu titolu).

Ftakar li fajls my_Vmenu.css my_Vmenu.html u għandhom jinżammu fl-istess direttorju. Madankollu, huma jistgħu jkunu lokalizzati fil-folders differenti, iżda mbagħad huwa importanti li tirreġistra fil-path fajl my_Vmenu.html għall my_Vmenu.css. Oqgħod attent, għax l-ġodda għal din il-problema spiss.

Stil għandu jkun ikkonnettjat ma l-tags ras fil-html-fajl. menu_1.png u menu_2.png - dan huwa l-istampa għall-oġġett menu istampa fl-istat normali u imbagħad jerġgħu.

Huwa aħjar li jiffrankaw l-immaġini fil-folder separat għall-immaġini, isem li bih my_images, iżda mbagħad Aġġusta l-kodiċi CSS. Ikteb fejn dawn ix-xbihat huma murija, huma f'dan direttorju: url (my_images / menu_1.png) u url (my_images / menu_2.png).

Fil-bqija tal-proprjetajiet deskritti fil-kodiċi CSS, biex jifhmu faċilment. Huma jiddefinixxu l-apparenza ta 'menu tagħna. Huwa faċli li tinnota li l-wisa 'u għoli ta' oġġetti speċifikati għall-istess oġġetti fl-istat normali, u meta inti imbagħad jerġgħu-maws fuqhom. daqs tat-tipa 18px, ikkuttunar jispeċifika l-indentazzjoni min-naħat differenti ta 'l-ismijiet ta' postijiet. wiri ihallik stabbiliti l-unità tal-wiri li tiffissa l-wisa 'u padding.

menu vertikali tagħna

Kif tistgħu taraw, l-menus CSS vertikali biex joħolqu faċilment. Fuq il-bażi ta 'data ta' għarfien inti tkun kapaċi li tagħmel sbieħ u attraenti għall-viżitaturi għal sit web tiegħek! Jużaw l-immaġinazzjoni tiegħek, u mbagħad menu stylish biex jikkumplimentaw is-sit tiegħek.