Vertikala CSS menuo: fari ĝin vi mem

Iuj retestroj ne volas elspezi tempon evoluantaj el nenio simplaj elementoj kiuj jam ekzistas. Ili kredas ke ekzistas neniu punkto en malŝparas vian tempon en iu kiu longe estis tie. Fakte, por tiuj, kiuj jxus majstranta HTML kaj CSS, estas grave fari vin mem multon havi bonan komprenon de ilia laboro. Tio koncernas la menuo. Krei vertikala CSS menuoj. Ĝi baziĝi nur sur HTML kaj CSS, sen la uzo de Javascript kaj jQuery. Ĉiu menuo estas listo de ligoj kiuj portas al paĝoj de la retejo.

bazaj paŝoj

Por krei simplan vertikala menuo CSS, vi bezonas la sekvajn paŝojn:

1. Unue, determini ligilaro (uzante kodon HTML), el kiuj la menuo estos. Donu al ili nomon, ekzemple, estas jenaj:

1. Hejmo.
2. Nia historio.
3. Gvidi.
4. Servoj.
5. Kontaktoj.

2. Tiam Styling ligoj kiel vi deziras kun la helpo de CSS.

Ni skribu la HTML-kodo, teni en my_Vmenu.html dosieron kaj vidi kiel ĝi aspektos en la retumilo:

Ĉi tiu estas la bazo (skeleto) de nia menuo. # 1, # 2, ktp devus esti anstataŭita de referenco. Vidu kiel ĝi aspektas en retumilo. La bildo vi ne ŝatas. Nun ni devas komenci por priskribi la elementojn de stilo, fari kompletan vertikala CSS menuoj.

Priskribo stiloj

Krei dosieron my_Vmenu.css kaj levis ĉion kion vi volas plibonigi la apero de tia grava elemento de la retejo. Jen la kodo, la enkonduko de kiu revitalizar la vertikala CSS menuoj. Ĝi kaj skribi la novan dosieron, kaj tiam ni prenas pli proksiman rigardi la signifon de la ĉefaj linioj kiuj estas donitaj.

DETALA PRISKRIBO uzita stilfolio

Nun konsideru la detaloj de nia CSS vertikala menuo:

listo-stilo-tipo permesas vin forigi la liston de markiloj. Per opcio "0" al la rando kaj kompletigo forigi la kroman Plenigado en la listo. Kiel povas esti vidita de la HTML-kodo, nia menuo estas listo, kaj la stiloj estas difinitaj uzante CSS.

ul # my_Vmenu - la totala stilo de la tuta listo.

ul # my_Vmenu span a - stilo ligojn inter la etikedo li.

ul # my_Vmenu span al: Hover - priskribon de la tipo sub konsidero de menueroj en tempo, kiam oni ŝvebas super popolo.

ul # my_Vmenu span manstrecxo - teksto priskribon (titolon menuo).

Memoru ke dosierojn my_Vmenu.css my_Vmenu.html kaj estas konservenda en la sama dosierujo. Tamen, ili povas esti lokitaj en malsamaj dosierujoj, sed tiam estas grave registri en my_Vmenu.html dosiero pado al my_Vmenu.css. Atentu, ĉar la novuloj al tiu problemo ofte.

Stilo devas esti konektita inter la kapo etikedoj en HTML-dosiero. menu_1.png kaj menu_2.png - ĉi tiu estas la bildo por la bildo menuero en la normala stato kaj ŝvebado.

Estas pli bone konservi la bildojn en apartan dosierujon por bildoj, ajn my_images, sed tiam Alĝustigu la CSS-kodo. Skribi kie tiuj bildoj estas montritaj, ili estas en ĉi tiu dosierujo: url (my_images / menu_1.png) kaj url (my_images / menu_2.png).

En la resto de la ecoj priskribitaj en la CSS kodo, kompreni facile. Ili difinas la aspekton de nia menuo. Facilas rimarki, ke la larĝeco kaj alteco de aĵoj specifita por la sama erojn en la normala stato, kaj kiam vi ŝvebi la muson super ili. Font grandeco 18px, kompletigon specifas la deŝovon el diversaj flankoj de la loknomoj. display ebligas atribui la display unuo por agordi la larĝo kaj kompletigo.

Nia vertikala menuo

Ĝi kiel povas vidi, la vertikala CSS menuoj krei facile. Surbaze de datumoj de scio vi povos fari lin bela kaj alloga al vizitantoj al via retejo! Uzu vian imagon, kaj tiam eleganta menuo por kompletigi viajn ejo.