Theաշացանկն օգտագործվում է կայքի բաժինների միջոցով օգտագործողի նավիգացիան հեշտացնելու համար: Այցելուի ուշադրությունը գրավելու համար ընտրացանկը պետք է լինի ֆունկցիոնալ, օգտագործման համար դյուրին և միևնույն ժամանակ զուգորդվի ամբողջ ռեսուրսի ձևավորման հետ:
Հրահանգներ
Քայլ 1
Նախքան ընտրացանկ ստեղծելը, որոշեք դրա տեսակը: Կարող եք ստեղծել բացվող հորիզոնական կամ ուղղահայաց տուփ, որը ցույց կտա օգտագործողին, երբ օգտագործողը մկնիկի ցուցիչով սավառնել է դրա վրա: Հատուկ ընտրացանկ ընտրելիս կարող եք առաջնորդվել, թե որքան հարմար կլինի այցելուներին օգտագործել այն և ինչպես այն համատեղել դիզայնի հետ:
Քայլ 2
Ընտրացանկի տեսակ ընտրելուց հետո բացեք ձեր էջի ֆայլը ՝ օգտագործելով ցանկացած տեքստային խմբագիր, որը օգտագործում եք HTML խմբագրելու համար: Անցեք ծածկագրի ցանկալի բաժին, որտեղ ցանկանում եք տեղադրել ձեր ինտերֆեյսի տարրը:
Քայլ 3
Դրանից հետո կազմեք ընտրանքների ցուցակ ՝ ստեղծելով բլոկ և կազմելով համարակալված ցուցակ ՝ դրան հատկացված id- ով: Օրինակ:
- Հղում 1
- Հղում 2
- Հղում 3
Այս օրինակում ես ստեղծեցի երեք տարրերից բաղկացած ցուցանակ և տեղադրեցի այն div շերտում `ID վահանակի ID- ով:
Քայլ 4
Գնացեք ձեր էջի բաժնի բլոկ և ստեղծեք համապատասխան կասկադային ոճի թերթիկների ցանկ: Եթե ցանկանում եք հորիզոնական ընտրացանկ ստեղծել, արդյունքում ցուցակի համար կարող եք ներառել ներքևի հատկանիշը.
#panel ul li {ցուցադրում: inline; }
Քայլ 5
Էջի ողջ երկարությամբ հորիզոնական գիծ ստեղծելու համար կարող եք օգտագործել հետևյալ ծածկագիրը.
# պանել ul {լուսանցք-ձախ: 0; լիցքավորում ՝ 2 հատ 0; }
Քայլ 6
Դրանից հետո դուք կարող եք կատարել տեսողական բաժանումը ուղղանկյունների.
#panel ul li a {margin-left: 3px; եզրագիծ ՝ 1 հատ; լիցքավորում ՝ 2px 3px; ֆոն `կապույտ; }
Այս կոդը սահմանում է սահմանային տարրերից տեքստի ցուցիչները `լուսանցքի ձախ և լրացման հատկանիշների միջոցով, ինչպես նաև ցուցակի տարրերից յուրաքանչյուրի համար սահմանում է ֆոնի գույն: Այս օրինակում գույնը կապույտ է, բայց այն կարող եք փոխել ձեր հայեցողությամբ:
Քայլ 7
Ներդիրում ընտրված ընթացիկ էջի այն կետը ցույց տալու համար համապատասխան պարամետրերը սահմանեք բաց դասի.
# menu ul li a # open {background: red; սահման-ներքևում `1 հատ; }
Վահանակում ընտրված ընթացիկ էջն այժմ կարմիրով կցուցադրվի:
Քայլ 8
Պահեք ֆայլի փոփոխությունները և ստուգեք գրված կոդի ֆունկցիոնալությունը ՝ զննարկչի միջոցով ձեր էջը բացելով: Displayուցադրման լրացուցիչ ընտրանքներ սահմանելու համար միշտ կարող եք ավելացնել CSS կամ HTML ՝ օբյեկտի տեսքը բարելավելու համար:
