Jauku nolaižamo izvēlni var izveidot ne tikai JavaScript, bet arī izmantojot standarta HTML tagus. Šī nolaižamās izvēlnes izveides metode būs noderīga tiem, kas tikai sāk savus pirmos soļus vietņu izveidē un vēlas vienkāršot lapu izvēlņu izveidi.
Instrukcijas
1. solis
HTML kodā šāda izvēlne ir nesakārtots saraksts, kura iekšpusē ir ligzdoti saraksti. Lai sāktu, izveidojiet failu style.css un tur nokopējiet šādu CSS kodu, lai stilizētu un formatētu izvēlni:
#nav, #nav ul {
saraksta stils: nav;
starpība: 0;
polsterējums: 0;
apmale: 1px cieta # 000;
fons: # 515151;
pludiņš: pa kreisi;
platums: 100%;
}
#nav li {
pludiņš: pa kreisi;
amats: radinieks;
fona krāsa: # 003366;
back / ground: nav;
}
#nav li ul {
displejs: nav;
pozīcija: absolūta;
fona krāsa: # 003366;
polsterējums: 8px 0;
platums: 138 pikseļi;
}
2. solis
Tagad izvēlnes elementiem jāpievieno daži rotājumi. Nosakiet to platumu un augstumu, noņemiet pasvītrojuma līnijas, iestatiet skaidru katras saites platumu un norādiet vēlamās fona krāsas.
3. solis
Visām šīm izmaiņām pievienojiet failam šādu kodu:
#nav a {
krāsa: #fff;
teksta noformēšana: nav;
displejs: bloks;
platums: 120px;
polsterējums: 4px 10px;
fona krāsa: # 003366 atkārtojiet-y pa labi;
}
#nav a: virziet kursoru {
krāsa: # 000;
fona krāsa: # 0033FF;
}
#nav li: lidināties {
fona krāsa: # 333333;
}
Pēc tam pievienojiet šādu koda daļu, lai pabeigtu izvēlnes izveidošanu:
#nav li: virziet kursoru li ul {
displejs: nav;
platums: 138 pikseļi;
augšdaļa: -9px;
pa kreisi: 133px;
}
#nav li: lidināties li: lidināties ul {
displejs: bloks;
}
4. solis
HTML versijā vispārējais nesakārtoto izvēlņu saraksts izskatās šādi - uz tā pamata tiek izveidota izvēlne, kas tika pieminēta rakstā.
- Mājas
-
Katalogs
-
Visi produkti
- Pēc datuma
- Ražotāji
- Cits
-
