Ուղղահայաց CSS մենյու: անում դա ինքներդ

Որոշ Վեբ վարպետների համար չեն ցանկանում ծախսել ժամանակ զարգացող զրոյից պարզ տարրերից, որոնք արդեն գոյություն ունեն: Նրանք կարծում են, որ չկա կետ, վատնելու Ձեր ժամանակը մի բան, որ վաղուց արդեն այնտեղ. Ի դեպ, նրանց համար, ովքեր պարզապես յուրացման HTML եւ CSS, դա կարեւոր է, որպեսզի ձեզ շատ բաներ է ունենալ լավ պատկերացում իրենց աշխատանքի. Սա վերաբերում է ցանկի մեջ. Ստեղծել ուղղահայաց CSS մենյուների. Այն հիմնված կլինի միայն HTML եւ CSS, առանց օգտագործման Javascript եւ JQuery: Յուրաքանչյուր մենյու մի ցանկ հղումներ, որոնք հանգեցնում են էջերում կայքում.

հիմնական քայլերը

Ստեղծել մի պարզ ուղղահայաց մենյու CSS, դուք պետք է հետեւյալ քայլերը:

1. Նախ, որոշելու, թե հղումների ցանկը (օգտագործելով կոդը HTML), որի մենյու կլինի: Տվեք նրանց անունը, օրինակ, հետեւյալն են.

1. Գլխավոր.
2. Մեր պատմությունը.
3. Ազգգային:
4. Ծառայություններ
5. Կապ.

2. Այնուհետեւ Styling հղումներ, ինչպես Դուք եք ցանկանում օգնությամբ CSS.

Մենք գրել HTML կոդը, պահել my_Vmenu.html ֆայլը եւ տեսնել, թե ինչպես դա կանդրադառնա է բրաուզերում:

Սա հիմք (կմախքը) մեր ցանկի մեջ. # 1, # 2, եւ այլն: պետք է փոխարինվեն հղում. Տես, թե ինչպես է այն տեսքը մի բրաուզերի. Պատկերն ձեզ դուր չի գալիս: Այժմ մենք պետք է սկսենք նկարագրել է տարրեր ոճով, որպեսզի մի ամբողջական ուղղահայաց CSS մենյուների.

Description: ոճերը

Ստեղծել ֆայլ my_Vmenu.css, որը սահմանված է ամեն ինչ դուք ցանկանում եք բարելավել տեսքը նման կարեւոր տարր է կայքում. Այստեղ է, որ կոդը, ներդրումը որը շունչ կհաղորդի ուղղահայաց CSS մենյուների. Այն գրել նոր ֆայլ, եւ ապա մենք պետք է վերցնել ավելի սերտ նայում իմաստը հիմնական գծերի, որոնք տրված.

Մանրամասն նկարագրությունը օգտագործվում պատուհան

Այժմ համարում մանրամասները մեր CSS ուղղահայաց մենյուի:

ցանկ ոճի տեսակ թույլ է տալիս Ձեզ հեռացնել ցուցակը Մարկերներ. Են ընդլայնված «0» է մարժա եւ լիցք հեռացնել լրացուցիչ լիցք է ցուցակում: Ինչպես կարելի է տեսնել, որ HTML կոդը, մեր մենյուն մի ցանկ, իսկ ոճերը որոշվում են CSS.

ուլ # my_Vmenu - ընդհանուր ոճը ամբողջ ցուցակում:

ուլ # my_Vmenu li մի ոճի հղումներ միջեւ հատկորոշիչը li:

ուլ # my_Vmenu li ը: Հովեր - նկարագրությունը տեսակի տակ հաշվի առնելով իրերի ցանկի այն ժամանակ, երբ մեկը hovers ավելի մարդ:

ուլ # my_Vmenu li մի թիզ - տեքստը նկարագրությունը (անվանումը մենյու):

Հիշում է, որ ֆայլերի my_Vmenu.css my_Vmenu.html եւ պետք է պահպանվի է նույն դիրեկտորիայի. Սակայն, նրանք կարող են գտնվում է տարբեր թղթապանակների, բայց հետո դա կարեւոր է գրանցվել my_Vmenu.html ֆայլի ճանապարհին my_Vmenu.css: Պետք է զգույշ լինել, քանի որ եկվորները այս խնդրին հաճախ.

Ոճը պետք է միացված միջեւ գլխին թեգերը մի html ֆայլ. menu_1.png եւ menu_2.png - սա պատկերն է նկար ընտրացանկի տարրը նորմալ պետության եւ սավառնել.

Դա ավելի լավ է փրկել պատկերները մի առանձին թղթապանակում պատկերներ, անվանել այն my_images, բայց հետո Կարգավորել CSS կոդը. Գրել, որտեղ այդ պատկերները են ցուցադրվում, որ նրանք այս գրացուցակում: URL (my_images / menu_1.png) եւ URL (my_images / menu_2.png):

Է մյուս հատկությունների նկարագրված է CSS կոդը, հասկանալ հեշտությամբ. Նրանք սահմանել տեսքը մեր ցանկի. Դա շատ հեշտ է նկատել, որ լայնությունը եւ բարձրությունը իրերի համար սահմանված նույն տարրերի նորմալ վիճակում, եւ երբ դուք սավառնել մկնիկը է նրանց: Տառատեսակի չափը 18px, լիցք սահմանում է ատամիկ տարբեր կողմերում տեղանվան: ցուցադրման հնարավորություն է տալիս Ձեզ սահմանել ցուցադրման միավորը սահմանված լայնությունը եւ լիցք.

Մեր ուղղահայաց մենյու

Ինչպես դուք կարող եք տեսնել, որ ուղղահայաց CSS Ընտրացանկերը է ստեղծել հեշտությամբ. Հիման վրա տվյալների գիտելիքների դուք կկարողանաք այն դարձնել գեղեցիկ եւ գրավիչ է այցելուներին Ձեր վեբ կայքը! Օգտագործեք ձեր երեւակայությունը, եւ ապա նորաձեւ մենյուն է լրացնել ձեր կայքը.