Pěknou rozbalovací nabídku lze vytvořit nejen v JavaScriptu, ale také pomocí standardních značek HTML. Tato metoda vytváření rozevírací nabídky bude užitečná pro ty, kteří právě začínají s prvními kroky při vytváření webů a chtějí zjednodušit práci při vytváření nabídek na stránkách.
Instrukce
Krok 1
V kódu HTML je taková nabídka neuspořádaným seznamem s vnořenými seznamy uvnitř. Začněte vytvořením souboru style.css a zkopírováním následujícího kódu CSS do nabídky stylu a formátování:
#nav, #nav ul {
styl seznamu: žádný;
okraj: 0;
výplň: 0;
ohraničení: 1px plná # 000;
pozadí: # 515151;
plavat vlevo;
šířka: 100%;
}
#nav li {
plavat vlevo;
pozice: relativní;
barva pozadí: # 003366;
back / ground: none;
}
#nav li ul {
displej: žádný;
pozice: absolutní;
barva pozadí: # 003366;
polstrování: 8px 0;
šířka: 138px;
}
Krok 2
Nyní musíme do položek nabídky přidat nějakou výzdobu. Definujte pro ně šířku a výšku, odstraňte čáry podtržení, pro každý odkaz nastavte světlou šířku a určete požadované barvy pozadí.
Krok 3
U všech těchto změn přidejte do souboru následující kód:
#nav a {
barva: #fff;
textová výzdoba: žádná;
displej: blok;
šířka: 120px;
výplň: 4px 10px;
barva pozadí: # 003366 repeat-y vpravo;
}
#nav a: hover {
barva: # 000;
barva pozadí: # 0033FF;
}
#nav li: hover {
barva pozadí: # 333333;
}
Poté dokončete nabídku přidáním následujícího kódu:
#nav li: hover li ul {
displej: žádný;
šířka: 138px;
nahoře: -9px;
vlevo: 133 pixelů;
}
#nav li: hover li: hover ul {
displej: blok;
}
Krok 4
Ve verzi HTML vypadá obecný neuspořádaný seznam nabídek takto - na jeho základě se vytvoří nabídka, která byla zmíněna v článku.
- Domov
-
Katalog
-
Všechny produkty
- Podle data
- Výrobci
- jiný
-
