Izmantojot labu HTML kodu un vienkāršus CSS noteikumus, varat izveidot jauku uznirstošo izvēlni, kuru var viegli pārveidot un papildināt. Izmantojot iezīmēšanas valodu un kaskādes stila lapas, varat pārliecināties, ka izvēlnes darbojas pareizi visās pārlūkprogrammās.
Instrukcijas
1. solis
Vispirms izveidojiet savas izvēlnes pamatstruktūru. Atveriet teksta redaktoru un izveidojiet numurētu sarakstu ar apakšizvēlni, kas darbojas kā vecāku saraksta vienums. Piemēram:
-
Pirmais elements
- Nolaižamais izvēlnes vienums
- Nolaižamā izvēlne2
2. solis
Saglabājiet izveidoto sarakstu atsevišķā HTML failā. Pēc tam izveidojiet failu ar paplašinājumu.css un ievadiet visus stila lapas parametrus.
3. solis
Noņemiet visus aizzīmes un aizzīmes, kas tiek izmantotas aizzīmju sarakstā, un iestatiet izvēlnes platumu, izmantojot CSS rīkus: ul {list-style: none;
platums: 200px; }
4. solis
Iestatiet visu saraksta elementu relatīvo pozīciju, izmantojot pozīcijas atribūtu: ul li {position: relatīvais; }
5. solis
Tālāk jums jāveido apakšizvēlne, kuras katrs elements parādīsies pa labi no vecāku izvēlnes brīdī, kad peles rādītājs atrodas uz vienuma: li ul {position: absolūts;
pa kreisi: 199 pikseļi;
augšdaļa: 0;
displejs: nav; } Kreisais atribūts ir par vienu pikseļu mazāks par pašas izvēlnes platumu. Tas ļauj uznirstošos vienumus saprātīgi novietot, neveidojot dubultas apmales. Displeja atribūts tiek izmantots, lai paslēptu apakšizvēlni, atverot lapu.
6. solis
Veidojiet saites pēc vēlēšanās, izmantojot atbilstošās css opcijas. Iekļaujiet parametru display: block, lai katra saite aizņemtu visu vietu, ko tā tai ir rezervējusi.
7. solis
Lai izvēlne tiktu parādīta brīdī, kad kursors atrodas virs tā (virziet kursoru), jāievada kods: li: hover ul {display: block; }
8. solis
Iestatiet papildu iespējas saites un saraksta vienumu parādīšanai pēc vēlēšanās.
9. solis
Uznirstošā izvēlne ir gatava. Atliek atribūtu iekļaut.html failā: uznirstošajā izvēlnē
