Lijep padajući izbornik može se stvoriti ne samo u JavaScript-u, već i pomoću standardnih HTML oznaka. Ova metoda stvaranja padajućeg izbornika bit će korisna onima koji tek započinju svoje prve korake u izradi web stranica i žele pojednostaviti rad na stvaranju izbornika na stranicama.
Upute
Korak 1
U HTML kodu takav je izbornik neuređeni popis s ugniježđenim popisima. Za početak stvorite datoteku style.css i tamo kopirajte sljedeći CSS kôd za oblikovanje i oblikovanje izbornika:
#nav, #nav ul {
stil popisa: nema;
marža: 0;
popunjavanje: 0;
obrub: 1px čvrsto # 000;
pozadina: # 515151;
plutaju: lijevo;
širina: 100%;
}
#nav li {
plutaju: lijevo;
položaj: relativan;
boja pozadine: # 003366;
leđa / tlo: nema;
}
#nav li ul {
zaslon: nema;
položaj: apsolutni;
boja pozadine: # 003366;
popunjavanje: 8px 0;
širina: 138px;
}
Korak 2
Sada stavkama izbornika moramo dodati ukras. Odredite širinu i visinu za njih, uklonite podcrtane crte, postavite jasnu širinu za svaku vezu i odredite željene boje pozadine.
3. korak
Za sve ove promjene u datoteku dodajte sljedeći kod:
#nav a {
boja: #fff;
ukras teksta: nijedan;
prikaz: blok;
širina: 120px;
popunjavanje: 4px 10px;
pozadina-boja: # 003366 ponavljanje-y desno;
}
#nav a: hover {
boja: # 000;
boja pozadine: # 0033FF;
}
#nav li: hover {
boja pozadine: # 333333;
}
Zatim dodajte sljedeći dio koda za finaliziranje izbornika:
#nav li: hover li ul {
zaslon: nema;
širina: 138px;
gore: -9 piksela;
lijevo: 133px;
}
#nav li: hover li: hover ul {
prikaz: blok;
}
4. korak
U HTML verziji, općeniti nesređeni popis izbornika izgleda ovako - na njegovoj osnovi se kreira izbornik, što je spomenuto u članku.
- Dom
-
Katalog
-
Svi proizvodi
- Po datumu
- Proizvođači
- Ostalo
-
