Հիանալի ընտրացանկը կարող է ստեղծվել ոչ միայն JavaScript- ում, այլ նաև օգտագործել ստանդարտ HTML պիտակներ: Բացվող ընտրացանկ ստեղծելու այս մեթոդը օգտակար կլինի նրանց համար, ովքեր նոր են սկսում կայքեր ստեղծելու իրենց առաջին քայլերը և ցանկանում են պարզեցնել էջերում ընտրացանկեր ստեղծելու աշխատանքը:
Հրահանգներ
Քայլ 1
HTML կոդում նման ընտրացանկը դասավորված չէ ցուցակում, որի ներսում տեղադրված են ցուցակները: Սկսելու համար ստեղծեք style.css ֆայլ և այնտեղ պատճենեք հետևյալ CSS կոդը ՝ ընտրացանկը ոճավորելու և ձևավորելու համար.
#nav, #nav ul {
ցուցակի ոճ `ոչ մեկը;
լուսանցք ՝ 0;
լիցքավորում ՝ 0;
եզրագիծ ՝ 1px պինդ # 000;
ֆոն `# 515151;
բոց `ձախ;
լայնությունը `100%;
}
#nav li {
բոց `ձախ;
դիրքը ՝ հարաբերական;
ֆոնային գույն ՝ # 003366;
ետ / գետնին. ոչ մեկը;
}
#nav li ul {
ցուցադրում `ոչ մեկը;
դիրքը ՝ բացարձակ;
ֆոնային գույն ՝ # 003366;
լիցքավորում ՝ 8 հատ 0;
լայնությունը `138px;
}
Քայլ 2
Այժմ մենք պետք է ընտրացանկի տարրերին որոշակի զարդարանք ավելացնենք: Սահմանեք դրանց լայնությունն ու բարձրությունը, հանեք ընդգծված գծերը, յուրաքանչյուր հղման համար սահմանեք հստակ լայնություն և նշեք ցանկալի ֆոնի գույները:
Քայլ 3
Այս բոլոր փոփոխությունների համար ֆայլում ավելացրեք հետևյալ ծածկագիրը.
#nav a {
գույնը ՝ #fff;
տեքստային զարդարանք. ոչ մեկը;
ցուցադրում ՝ բլոկ;
լայնությունը `120px;
լիցքավորում ՝ 4px 10px;
background-color: # 003366 կրկնել-y աջ;
}
#nav a: hover {
գույնը `# 000;
ֆոնային գույն ՝ # 0033FF;
}
#nav li: Հովեր {
ֆոնային գույն ՝ # 333333;
}
Ապա ավելացրեք հետևյալ կոդի կտորը ՝ ընտրացանկը վերջնական տեսքի բերելու համար.
#nav li: hover li ul {
ցուցադրում `ոչ մեկը;
լայնությունը `138px;
վերև ՝ -9 px;
ձախ: 133px;
}
#nav li: hover li: hover ul {
ցուցադրում ՝ բլոկ;
}
Քայլ 4
HTML տարբերակում ընդհանուր չպատվիրված ցանկի ցուցակն այսպիսի տեսք ունի. Դրա հիման վրա ստեղծվում է այն ընտրացանկը, որը նշված էր հոդվածում:
- տուն
-
Կատալոգ
-
Բոլոր ապրանքները
- Ըստ ամսաթվի
- Արտադրողներ
- Այլ
-
