Իրավասու HTML կոդի և CSS պարզ կանոնների օգնությամբ դուք կարող եք ստեղծել ելնող ցանկ, լրացնել այն և փոփոխել այն: Օգտագործելով կասկադային աղյուսակները և նշագրման լեզվի գործիքները, կարող եք համոզվել, որ ընտրացանկը ինքնին ճիշտ է աշխատում բոլոր զննարկիչներում:
Հրահանգներ
Քայլ 1
Նախ պահեք հիմնական ցանկի տողը: Ստեղծեք հատուկ համարակալված ցուցակ ենթամենյուի հետ տեքստի խմբագրում: Սովորաբար այդ նպատակների համար օգտագործվում է «Գրառման գրքույկ»: Ենթամենյուն գործում է որպես ծնողական ցուցակի տարր: Օրինակ ՝ Առաջին տարրը ջրհեղեղի տարրը ջրհեղեղի տարրը 2 դաշտի տարրը 3 դաշտի տարրը 4 դաշտի տարրը 5
Քայլ 2
Այս ցուցակը պահեք առանձին html ֆայլում: Դրանից հետո ստեղծեք.css ֆայլ: Մուտքագրեք ոճի թերթիկի պահանջվող բոլոր պարամետրերը: Դա արեք շատ ուշադիր, քանի որ մեկ սխալ, և ելնող ընտրացանկը ճիշտ չի ցուցադրվի կամ ընդհանրապես չի գործի:
Քայլ 3
Հեռացրեք փամփուշտների ցուցակում կիրառված ցանկացած փամփուշտ և լցոն: Սահմանեք ընտրացանկի լայնությունը ՝ օգտագործելով CSS գործիքներ. Ul -style: none; լայնությունը ՝ 200px; }
Քայլ 4
Listանկում նշված բոլոր կետերի հարաբերական դիրքը նշեք դիրքով կոչվող հատկանիշով. Ul li: relative; }
Քայլ 5
Դրանից հետո դասավորեք ենթամենյուը, որի տարրերը կհայտնվեն ծնողի ընտրացանկից դեպի աջ, երբ մկնիկի ցուցիչը գտնվում է իրի վրա. Li ul: բացարձակ; ձախ: 199px; վերև ՝ 0; ցուցադրում ՝ ոչ; }
Քայլ 6
Ձախ ատրիբուտը մեկ պիքսել պակաս է բուն ցանկի լայնությունից: Սա թույլ է տալիս թռուցիկ նյութերին ճիշտ տեղակայել ՝ առանց կրկնակի եզրագծերի ստեղծման: Displayուցադրման հատկանիշն օգտագործվում է էջը բացելիս ենթամենյուը թաքցնելու համար:
Քայլ 7
Հղումներն անհրաժեշտության դեպքում ոճավորեք ՝ օգտագործելով համապատասխան css ընտրանքներ: Ներառեք ցուցադրումը `բլոկի պարամետրը, որպեսզի հղումները զբաղեցնեն իրենց համար նախատեսված ամբողջ տարածքը: Ընտրացանկը հայտնվելու համար, երբ մկնիկի կուրսորը սավառնում է դրա վրա, մուտքագրեք հետևյալ կոդը ՝ li: hover ul: block; }
Քայլ 8
Սահմանեք լրացուցիչ ընտրանքներ ցուցակի իրերն ու հղումները ըստ ցանկության ցուցադրելու համար: Ներառեք հատկանիշ.html ֆայլում: Թռուցիկ ցանկը պատրաստ է օգտագործման համար:
