Լավ HTML կոդի և CSS- ի պարզ կանոնների օգնությամբ դուք կարող եք ստեղծել գեղեցիկ պատուհանի ընտրացանկ, որը կարող է հեշտությամբ փոփոխվել և լրացվել: Օգտագործելով նշման լեզու և կասկադի ոճի թերթեր, դուք կարող եք ապահովել, որ ընտրացանկերը ճիշտ են աշխատում բոլոր զննարկիչներում:
Հրահանգներ
Քայլ 1
Նախ, կառուցեք ձեր ընտրացանկի հիմնական կառուցվածքը: Բացեք տեքստի խմբագիր և ստեղծեք համարակալված ցուցակ ենթամենյուով, որը գործում է որպես ծնողական ցուցակի տարր: Օրինակ:
-
Առաջին տարր
- Բաց թողնող տարր
- Dropdown2
Քայլ 2
Գեներացված ցուցակը պահպանեք առանձին html ֆայլում: Հաջորդը, ստեղծեք.css ընդլայնմամբ ֆայլ և մուտքագրեք ոճի թերթի բոլոր պարամետրերը:
Քայլ 3
Հեռացրեք փամփուշտների ցուցակում կիրառվող լցոնումները և փամփուշտները և ընտրացուի լայնությունը սահմանեք ՝ օգտագործելով CSS գործիքներ.
լայնությունը `200px; }
Քայլ 4
Սահմանեք ցուցակի բոլոր կետերի հարաբերական դիրքը `օգտագործելով դիրքի հատկանիշը. Ul li {դիրքորոշում: հարաբերական; }
Քայլ 5
Հաջորդը, դուք պետք է նախագծեք ենթամենյու, որի յուրաքանչյուր տարրը կհայտնվի ծնողի ընտրացանկի աջ կողմում այն պահին, երբ մկնիկի ցուցիչը գտնվում է իրի վրա: li ul {դիրքը: բացարձակ;
ձախ: 199px;
վերև ՝ 0;
ցուցադրում `ոչ մեկը; } Ձախ հատկանիշը մեկ պիքսել պակաս է բուն ցանկի լայնությունից: Սա թույլ է տալիս pop-up իրերին խելացիորեն տեղակայել ՝ առանց կրկնակի եզրագծերի ստեղծման: Displayուցադրման հատկանիշն օգտագործվում է էջը բացելիս ենթամենյուը թաքցնելու համար:
Քայլ 6
Հղումները ոճավորեք ըստ ցանկության ՝ օգտագործելով համապատասխան css ընտրանքներ: Ներառեք ցուցադրումը `բլոկի պարամետրը, որպեսզի յուրաքանչյուր հղում զբաղեցնի իրեն վերապահված ամբողջ տարածքը:
Քայլ 7
Theանկը հայտնվելու պահին այն պահից, երբ կուրսորը դրեց դրա վրա (սավառնել), անհրաժեշտ է մուտքագրել կոդը ՝ li: hover ul {display: block; }
Քայլ 8
Սահմանեք լրացուցիչ ընտրանքներ հղումները ցուցադրելու համար և ցանկը ցանկը ցուցակելու համար:
Քայլ 9
Թռուցիկ ցանկը պատրաստ է: Այժմ մնում է հատկությունը ներառել.html ֆայլում. Թռուցիկ ընտրացանկ
