Pekné rozbaľovacie menu je možné vytvoriť nielen v JavaScripte, ale aj pomocou štandardných značiek HTML. Táto metóda vytvárania rozbaľovacej ponuky bude užitočná pre tých, ktorí ešte len začínajú svoje prvé kroky pri vytváraní webov a chcú si zjednodušiť prácu na vytváraní ponúk na stránkach.
Inštrukcie
Krok 1
V kóde HTML je takáto ponuka neusporiadaným zoznamom s vnorenými zoznamami vo vnútri. Ak chcete začať, vytvorte súbor style.css a skopírujte tam nasledujúci kód CSS, aby ste štýl a formátovali ponuku:
#nav, #nav ul {
štýl zoznamu: žiadny;
okraj: 0;
výplň: 0;
orámovanie: 1px pevný # 000;
pozadie: # 515151;
plavák: vľavo;
šírka: 100%;
}
#nav li {
plavák: vľavo;
poloha: relatívna;
farba pozadia: # 003366;
späť / zem: žiadny;
}
#nav li ul {
displej: žiadny;
pozícia: absolútna;
farba pozadia: # 003366;
výplň: 8px 0;
šírka: 138px;
}
Krok 2
Teraz musíme do položiek ponuky pridať nejaké zdobenie. Definujte pre nich šírku a výšku, odstráňte podčiarknuté čiary, nastavte svetlú šírku pre každý odkaz a zadajte požadované farby pozadia.
Krok 3
Pri všetkých týchto zmenách pridajte do súboru nasledujúci kód:
#nav a {
farba: #fff;
dekorácia textu: žiadny;
displej: blok;
šírka: 120px;
výplň: 4px 10px;
farba pozadia: # 003366 repeat-y vpravo;
}
#nav a: hover {
farba: # 000;
farba pozadia: # 0033FF;
}
#nav li: hover {
farba pozadia: # 333333;
}
Potom dokončite ponuku pridaním nasledujúceho kódu:
#nav li: hover li ul {
displej: žiadny;
šírka: 138px;
vrchná časť: -9px;
vľavo: 133 pixelov;
}
#nav li: hover li: hover ul {
displej: blok;
}
Krok 4
Vo verzii HTML vyzerá všeobecný neusporiadaný zoznam ponúk takto - na jeho základe sa vytvorí menu, ktoré bolo spomenuté v článku.
- Domov
-
Katalóg
-
Všetky produkty
- Podľa dátumu
- Výrobcovia
- Iné
-
