Vètikal meni CSS: fè li tèt ou

Gen kèk vebmèstr pa vle pase tan devlope soti nan eleman grate senp ki deja egziste. Yo kwè ke pa gen okenn pwen nan gaspiye tan ou sou yon bagay ki ki depi lontan te la. An reyalite, pou moun ki ap jis metrize HTML ak CSS, li enpòtan yo fè tèt ou yon bann bagay sa yo yo gen yon bon konpreyansyon yo genyen sou travay yo. Sa a aplike a meni an. Kreye yon meni CSS vètikal. Li pral baze sèlman sou HTML ak CSS, san yo pa itilize nan JavaScript ak JQuery. Chak meni a se yon lis nan lyen ki mennen nan paj nan sit la.

etap debaz

Pou kreye yon senp vètikal meni CSS, ou bezwen etap sa yo:

1. Premyèman, detèmine yon lis nan lyen (lè l sèvi avèk kòd HTML), ki meni an pral. Ba yo yon non, pou egzanp, yo jan sa a:

1. Kay.
2. istwa nou an.
3. Gid.
4. Sèvis.
5. Kontak.

2. Apresa Manier lyen jan ou vle avèk èd nan CSS.

Nou ekri kòd la HTML, kenbe nan dosye my_Vmenu.html ak wè kòman li pral gade nan navigatè a:

Sa a se baz la (kilè eskèlèt) nan meni nou an. # 1, # 2, elatriye yo ta dwe ranplase pa referans. Gade kouman li sanble nan yon navigatè. Foto a ou pa pral renmen. Koulye a, nou dwe kòmanse a dekri eleman ki nan style, fè yon nèt sou tout pwen meni CSS vètikal.

Deskripsyon Styles

Kreye yon my_Vmenu.css dosye, ki mete tout bagay ou vle amelyore aparans la tout moun ki tankou yon eleman enpòtan nan sit la. Isit la se kòd la, entwodiksyon nan la ki pral revitalize meni yo CSS vètikal. Li ak ekri dosye a nouvo, ak Lè sa a nou pral pran yon gade pi pre siyifikasyon an nan liy prensipal yo ke yo bay yo.

Detaye Deskripsyon itilize stylesheet

Koulye a, konsidere detay yo nan meni CSS nou an vètikal:

lis-style-kalite pèmèt ou yo retire lis la nan makè. Pa mete "0" nan Marge la ak padding retire kouvèti siplemantè a nan lis la. Kòm ka wè nan kòd la HTML, meni nou an, se yon lis, ak estil yo yo defini lè l sèvi avèk CSS.

UL # my_Vmenu - style la an jeneral nan lis la tout antye.

UL # my_Vmenu Li yon - lyen style ant Li nan tag.

UL # my_Vmenu Li yon: hover - yon deskripsyon nan kalite la anba konsiderasyon nan atik meni nan yon moman lè yon plan sou moun.

UL # my_Vmenu Li yon span - deskripsyon tèks (meni tit).

Sonje ke dosye my_Vmenu.css my_Vmenu.html, epi yo dwe konsève nan anyè a menm. Sepandan, yo ka pral lokalize nan dosye diferan, men Lè sa a, li enpòtan yo enskri nan chemen dosye my_Vmenu.html my_Vmenu.css. Fè atansyon, paske fèk vini yo nan pwoblèm sa a souvan.

dwe Style dwe konekte ant etikèt yo tèt nan yon html-dosye-a. menu_1.png ak menu_2.png - sa a se foto a pou atik la meni foto nan eta a ki nòmal epi hover.

Li se pi bon pou konsève pou imaj yo nan yon katab apa pou imaj, non li my_images, men Lè sa Ajiste kòd la CSS. Ekri kote imaj sa yo yo montre yo, yo se nan anyè sa a: url (my_images / menu_1.png) ak url (my_images / menu_2.png).

Nan rès la nan pwopriyete yo dekri nan kòd la CSS, yo konprann fasil. Yo defini aparans nan meni nou an. Li se fasil remake ke lajè a ak wotè nan atik espesifye pou atik yo menm nan eta a nòmal, ak ki lè ou hover sourit la sou yo. Font size 18px, padding espesifye dekoupaj an soti nan kote diferan nan non yo plas. ekspozisyon pèmèt ou mete inite a ekspozisyon yo mete lajè a ak pwotèj.

meni vètikal nou

Kòm ou ka wè, meni yo CSS vètikal yo kreye fasil. Sou baz la nan done nan konesans ou yo pral kapab fè li bèl ak atire vizitè yo sou sit entènèt ou! Sèvi ak imajinasyon ou, ak Lè sa yon meni élégance konpleman sit ou.