Ինչպես նախագծել ընտրացանկը կայքում

Բովանդակություն:

Ինչպես նախագծել ընտրացանկը կայքում
Ինչպես նախագծել ընտրացանկը կայքում

Video: Ինչպես նախագծել ընտրացանկը կայքում

Video: Ինչպես նախագծել ընտրացանկը կայքում
Video: Սխալներն ու տնային պլանավորումը դա անում եք ինքներդ նայեք և ճիշտ արեք դա 2024, Երթ
Anonim

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 ՝ օբյեկտի տեսքը բարելավելու համար:

Խորհուրդ ենք տալիս: