Lep spustni meni lahko ustvarite ne samo v JavaScript, temveč tudi s standardnimi oznakami HTML. Ta način ustvarjanja spustnega menija bo koristen tistim, ki šele začenjajo prve korake pri ustvarjanju spletnih mest in želijo poenostaviti delo pri ustvarjanju menijev na straneh.
Navodila
Korak 1
V kodi HTML je tak meni neurejen seznam z vgnezdenimi seznami. Za začetek ustvarite datoteko style.css in tam kopirajte naslednjo kodo CSS, da oblikujete in oblikujete meni:
#nav, #nav ul {
slog sloga: noben;
marža: 0;
oblazinjenje: 0;
obroba: 1px neprekinjeno # 000;
ozadje: # 515151;
plovec: levo;
širina: 100%;
}
#nav li {
plovec: levo;
položaj: sorodnik;
barva ozadja: # 003366;
nazaj / tla: nič;
}
#nav li ul {
zaslon: noben;
položaj: absolutno;
barva ozadja: # 003366;
oblazinjenje: 8px 0;
širina: 138px;
}
2. korak
Zdaj moramo elementom menija dodati nekaj okraskov. Določite jim širino in višino, odstranite podčrtane črte, nastavite jasno širino za vsako povezavo in določite želene barve ozadja.
3. korak
Za vse te spremembe v datoteko dodajte naslednjo kodo:
#nav a {
barva: #fff;
dekoracija besedila: nobena;
zaslon: blok;
širina: 120px;
oblazinjenje: 4px 10px;
barva ozadja: # 003366 ponovitev-y desno;
}
#nav a: hover {
barva: # 000;
barva ozadja: # 0033FF;
}
#nav li: hover {
barva ozadja: # 333333;
}
Nato dodajte naslednji del kode, da dokončate meni:
#nav li: hover li ul {
zaslon: noben;
širina: 138px;
zgoraj: -9 slikovnih pik;
levo: 133 slikovnih pik;
}
#nav li: hover li: hover ul {
zaslon: blok;
}
4. korak
V različici HTML je splošen neurejen seznam menijev videti tako - na njegovi osnovi se ustvari meni, ki je bil omenjen v članku.
- Domov
-
Katalog
-
Vsi izdelki
- Po datumu
- Proizvajalci
- Drugo
-
