Քայլ առ քայլ ուղեցույց
Արդյոք ձեր նավարկության մենյուը հորիզոնական տող է վերեւում կամ ուղղահայաց տողում, ներքեւում, դա դեռ միայն ցուցակ է: Վեբ-նավարկության նախագծման ժամանակ հեշտ է մոռանալ, որ նավարկության մենյուը պարզապես հղումների խումբ է: Բայց եթե ծրագրավորեք ձեր նավիգացիան XHTML + CSS- ի միջոցով, կարող եք ստեղծել մենյու, որը փոքր է բեռնել (XHTML) եւ հեշտությամբ հարմարեցնել (CSS):
Սկսել
Սկսելու նավարկության ցուցակը կազմելու համար անհրաժեշտ է օգտագործել ցուցակը:
Այն կարող է լինել ստանդարտ չվերահսկվող ցուցակ, որը հայտնաբերվել է որպես նավիգացիա.
Եթե ուշադիր նայեք HTML- ում, նկատում եք, որ «Տուն» հղումը նույնպես ունի ձեր ID կոդը: Սա թույլ է տալիս ստեղծել մենյու, որը նույնացնում է ձեր ընթերցողների ներկայիս վայրը: Նույնիսկ եթե դուք չեք պլանավորում ունենալ ձեր տեսադաշտում այդ տեսակի տեսարան ունենալը հենց հիմա, կարող եք ներառել այդ տեղեկատվությունը: Եթե որոշեք ավելացնել թղթապանակը, ապա ավելի քիչ կոդավորեք, որպեսզի ձեր կայքը պատրաստի:
Առանց որեւէ CSS- ի ձեւավորման , այս XHTML մենյուը կարծես ստանդարտ չվերականգնված ցանկ է: Կան փամփուշտներ եւ ցանկի տարրերը փոքր-ինչ անջատված են: Քանի որ ես օգտագործում եմ հոլդինգի հղումներ , շատ բրաուզերները չեն ցուցադրի հղումները որպես clickable (ընդգծված եւ կապույտ): Եթե վերը նշված HTML- ում տեղադրեք վեբ էջ, ձեր նավարկությունը նման կլինի հետեւյալը.
- տուն
- Ապրանքներ
- Ծառայություններ
- Կապ մեզ հետ
Սա բավականին ձանձրալի է եւ մենյուի նման չի երեւում: Բայց ցուցակում ընդգրկված ընդամենը մի քանի CSS ոճով, կարող եք ստեղծել մենյու, որը հպարտանում է:
Ուղղահայաց նիշային մենյու
Ուղղահայաց նավիգացիոն ցանկը շատ հեշտ է գրել, քանի որ այն ցուցադրվում է այնպես, ինչպես նորմալ ցուցակը `վեր ու վար:
Ցուցակի տարրերը ուղղահայաց են էջը ներքեւում:
Երբ ես սեղմում եմ բաժինները, ես սիրում եմ դրսից սկսել եւ աշխատել: Այսպիսով, ես նկատի ունեմ, որ ես առաջին ոճն էի U1 նավիգացիան եւ այնուհետեւ տեղափոխվեմ լիտր տարրեր, ապա հղումներ եւ այլն: Այսպիսով, Նախ `ընտրեք ցանկի լայնությունը: Սա ապահովելու է, որ նույնիսկ եթե ցանկի տարրերը երկար լինեն, նրանք չեն մղում մնացած մասի վրա կամ առաջացնում են հորիզոնական լռություն:
ul # նավարկություն {լայնություն `12em; }
Երբ ես ստացել լայնությունը սահմանված, ես կարող եմ խաղալ ցուցակի տարրերով: Սա թույլ է տալիս ինձ սահմանել նման բաներ (փամփուշտներից ազատվելու համար), ֆոնային գույները, սահմանները, տեքստի դասավորվածությունը եւ ծայրերը:
ul # նավարկություն li {
ցանկի ոճ `ոչ;
background-color: # 039;
border-top: ամուր 1px # 039;
text-align: ձախ;
margin: 0;
}
Խմբի համար հիմունքները սահմանելուց հետո դուք կարող եք սկսել խաղալ այնպես, ինչպես մենյուը նայում է հղումների տարածքում: Առաջին ոճը UL # navigator LI A, ապա A: հղումը, A: այցելել, A: սավառնել եւ A: ակտիվ (եթե ցանկանում եք դրանք): Հղումների համար, ես սիրում եմ հղումները մի բլոկի տարր (փոխարենը նախնական ներցանցային): Սա ստիպում է նրանց վերցնել LI- ի ամբողջ տարածքը, եւ նրանք գործել են ավելի շատ նման պարբերություն, ինչը հեշտացնում է նրանց ոճը, որպես մենյուի կոճակներ: Մյուս բանը, որ միշտ անում եմ, հեռացնում է ընդգծումը (text-decoration: none;), քանի որ դա ստիպում է կոճակները ինձ ավելի շատ կոճակներ տեսնել:
Բայց, իհարկե, ձեր դիզայնը կարող է տարբեր լինել:
ul # navigator a {
ցուցադրում `բլոկ;
տեքստերի ձեւավորում `ոչ;
padding: .25em;
border-bottom: solid 1px # 39f;
border-right: ամուր 1px # 39f;
}
Ուշադրություն դարձրեք, որ ցուցադրումը `բլոկ; սահմանել է հղումները, ցանկի տարրի ողջ տուփը կտտացնելով, ոչ միայն տառերը: Սա նաեւ լավ է հարմարավետության համար: Համոզվեք, որ կապի գույները տեղադրեք (հղում, այցելել, սավառնել եւ ակտիվ), եթե ցանկանում եք, որ դրանք տարբերվեն ստանդարտ կապույտ, կարմիր եւ մանուշակագույնից:
a: հղում, a: այցելել {color: #fff; }
a: hover, a: ակտիվ {color: # 000; }
Ես նաեւ ցանկանում եմ, որ սավառան պետությանը ավելի շատ ուշադրություն դարձնեմ ֆոնի գույնի փոխելով:
a: hover {background-color: #fff; }
Եթե ցանկանում եք ուղղահայաց բաժինների ավելի շատ օրինակներ, խորհրդակցեք ստորեւ նշված ցանկին:
- A Styled ուղղահայաց մենյու
- Հիմնական Ուղղահայաց Մենյու Կաղապար
- Ատամնաբուժական ուղղահայաց մենյու դուք այստեղ եք
- Հիմնական Ուղղահայաց Մենյու Կաղապար Դուք այստեղ եք
Հորիզոնական նավիգացիայի ցանկը
Հորիզոնական նավիգացիոն բաժինների ստեղծումը մի փոքր ավելի բարդ է, քան ուղղահայաց նավիգացիոն բաժինները, քանի որ դուք պետք է փոխհատուցեք այն փաստը, որ HTML ցուցակները նախընտրում են ուղղահայաց ցուցադրվել: Ինչպես հորիզոնական մենյուից, նախ ստեղծել ձեր նավիգացիոն ցանկի ցանկը .
Հորիզոնական մենյու ստեղծելու համար աշխատեք այն նույն ուղղությամբ, ինչպիսին եք ուղղահայաց մենյուով: Սկսեք դրսից եւ աշխատեք: Քանի որ ես ուզում եմ, որ նավիգացիան սկսվի ձախ անկյունում, ես դրեցի այն 0 ձախ եզրագծով եւ լցնում, եւ ես այն ձգում եմ ձախ: Դուք նաեւ պետք է հասնեք լայնությունը տեղադրելու սովորությանը, որպեսզի ձեր մենյուն ավելի ու ավելի քիչ տարածք չի զբաղեցնում, քան դուք մտադիր եք: Հորիզոնական մենյուների համար սա սովորաբար դիզայնի լրիվ լայնությունն է: Ես նաեւ ավելացրեցի ֆոնային գույն ամբողջ ցուցակում, որպեսզի ավելի հեշտ կարդա:
ul # նավարկություն {
float: ձախ;
margin: 0;
լրացնելով `0;
լայնությունը `100%;
background-color: # 039;
}
Բայց հորիզոնական նավարկության մենյուի գաղտնագիրը ցանկի մեջ է: Ցանկի տարրերը սովորաբար բլոկի տարրեր են, ինչը նշանակում է, որ նրանք կունենան նոր գծեր, որոնք տեղադրվում են յուրաքանչյուրից առաջ եւ հետո: Ցուցադրելը բլոկից դեպի ներս մտնելը դանդաղեցրեք, ցանկի տարրերը պարտադրեք հորիզոնական կողմնորոշվել միմյանց կողքին:
ul # նավարկություն li {դրսեւորում `inline; }
Ես վերաբերվում եմ հղումներին, ճիշտ այնպես, ինչպես ես վերաբերվում եմ նրանց ուղղահայաց նավիգացիոն ցանկում, նույն գույներով եւ տեքստի ձեւավորումով: Ես ավելացրեցի վերեւի սահմանը կոճակները սահմանելու համար, երբ դրանք տեղադրվեցին: Միակ բանը, որ ես հեռացա, ցուցադրվեց. քանի որ այն նոր գծեր կվերցնի հորիզոնական մենյուին եւ կկործանի:
ul # navigator a {
տեքստերի ձեւավորում `ոչ;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: ամուր 1px # 39f;
border-right: ամուր 1px # 39f;
}
a: հղում, a: այցելել {color: #fff; }
ul # navigator a: hover {
background-color: #fff;
գույնը `# 000;
}
Դուք այստեղ եք գտնվելու վայրը
HTML- ի մեկ այլ ասպեկտը այն վայրի նույնացուցիչն է: Եթե ցանկանում եք փոփոխել ձեր ընտրացանկը `ցույց տալ ձեր օգտագործողների ներկայիս գտնվելու վայրը, պարզապես օգտագործեք այս ID- ն` այլ ֆոնի գույն կամ այլ ոճը սահմանելու համար: Տեղափոխեք այդ ID հատկանիշը մյուս էջերի ճիշտ ընտրացանկի տարրին, որպեսզի ընթացիկ էջը միշտ ընդգծվի:
ul # նավարկություն # youarhere {background-color: # 09f; }
Եթե այս ոճերը միասին տեղադրեք ձեր էջում, կարող եք ստեղծել հորիզոնական կամ ուղղահայաց մենյուի բար, որը աշխատում է ձեր կայքի հետ, սակայն հետագայում բեռնել եւ շատ հեշտ է թարմացնել: Օգտագործելով XHTML + CSS- ը ձեր ցուցակները դարձնում է շատ հզոր գործիք `նախագծման համար:
Եթե ցանկանում եք հորիզոնական մենյուների ավելի շատ օրինակներ, խորհրդակցեք հետեւյալը.
- A Styled հորիզոնական մենյու
- Հիմնական Հորիզոնական Մենյու Կաղապար
- Դուք այստեղ եք գտնվում ոճավորված հորիզոնական մենյու
- Հիմնական հորիզոնական մենյուի կաղապարը այստեղ եք