Lijep padajući izbornik može se stvoriti ne samo u JavaScript-u, već i pomoću standardnih HTML oznaka. Ovaj način stvaranja padajućeg izbornika bit će koristan onima koji tek započinju svoje prve korake u stvaranju web lokacija i žele pojednostaviti rad na stvaranju izbornika na stranicama.
Instrukcije
Korak 1
U HTML kodu takav je meni nesređena lista s ugniježđenim listama. Za početak stvorite datoteku style.css i tamo kopirajte sljedeći CSS kôd za oblikovanje i formatiranje izbornika:
#nav, #nav ul {
stil liste: nema;
marža: 0;
popunjavanje: 0;
granica: 1px puna # 000;
pozadina: # 515151;
plutajuće: lijevo;
širina: 100%;
}
#nav li {
plutajuće: lijevo;
položaj: relativan;
boja pozadine: # 003366;
natrag / tlo: nema;
}
#nav li ul {
zaslon: nema;
pozicija: apsolutna;
boja pozadine: # 003366;
popunjavanje: 8px 0;
širina: 138px;
}
Korak 2
Sada moramo dodati ukras stavkama menija. Odredite širinu i visinu za njih, uklonite podcrtane linije, postavite jasnu širinu za svaku vezu i navedite željene boje pozadine.
Korak 3
Za sve ove promjene dodajte sljedeći kod u datoteku:
#nav a {
boja: #fff;
dekoracija teksta: nema;
prikaz: blok;
širina: 120px;
popunjavanje: 4px 10px;
boja pozadine: # 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: -9px;
lijevo: 133px;
}
#nav li: hover li: hover ul {
prikaz: blok;
}
Korak 4
U HTML verziji, općenito neuređena lista izbornika izgleda ovako - na njenoj osnovi se kreira meni koji je spomenut u članku.
- Dom
-
Katalog
-
Svi proizvodi
- Po datumu
- Proizvođači
- Ostalo
-
