Rozevírací nabídky na stránkách webu se používají k úspoře místa a poskytují logickou prezentaci struktury webového zdroje. Existuje mnoho způsobů, jak tento prvek implementovat, jeden z nejjednodušších je uveden níže.
Je to nutné
Základní znalost jazyků HTML a CSS
Instrukce
Krok 1
HTML kód nabídky používá vnořené prvky seznamu (UL a LI), uvnitř kterých jsou umístěny odkazy na stránky. Neobsahuje žádné složité struktury. Dynamika je implementována pomocí CSS, jehož popisný blok je umístěn přímo ve zdrojovém kódu stránky. Ani na tom není nic zvláštního, kromě toho text obsahuje několik vysvětlení účelu určitých bloků stylů.
Krok 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
„https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Rozbalovací nabídka * {
rodina fontů: Verdana;
velikost písma: 14px;
} ul, li, a {
výplň: 0;
displej: blok;
ohraničení: 0;
okraj: 0;
} ul {
ohraničení: 1px pevné #AAA;
šířka: 150px;
styl seznamu: žádný;
pozadí: #FFF;
} li {
barva pozadí: #AAA;
pozice: relativní;
z-index: 9;
výplň: 1px;
}
li.folder {barva pozadí: #AAA;}
li.folder ul {
pozice: absolutní;
nahoře: 5px;
vlevo: 111 pixelů; / * pro prohlížeče IE * /
}
li.folder> ul {left: 140px;} / * pro ostatní prohlížeče * / a {
výplň: 2px;
ohraničení: 1px pevný #FFF;
textová výzdoba: žádná;
šířka: 100%; / * pro prohlížeče IE * /
barva: # 000;
váha písma: tučné;
}
li> a {width: auto;} / * pro ostatní prohlížeče * / li a {
šířka: 140px;
displej: blok;
} li a.submenu {
barva pozadí: žlutá;
} / * Odkazy * /
a: hover {
barva ohraničení: šedá;
barva pozadí: # FF0000;
Černá barva;
}
li.folder a: hover {
barva pozadí: # FF0000;
} / * Složky * /
ul ul, li: vznášet se ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Stránka
-
2. Složka
- 2.1 strana
-
2.2 Složka
- 2.2.1 Stránka
- 2.2.2 Stránka
- 2.2.3 Stránka
- 2.3 Stránka
-
3. Složka
- 3.1 Stránka
- 3.2 Stránka
- 3.3 Stránka
- 4. Stránka
Krok 3
K tomuto kódu můžete přidat podporu pro starší verze prohlížečů Internet Explorer - implementuje se pomocí JavaScriptu (Peter Nederlof). Musíte si stáhnout soubor s požadovaným kódem, například z tohoto odkazu - https://peterned.home.xs4all.nl/htc/csshover3.htc. Musí být umístěn ve stejné složce jako hlavní stránka. A v popisu stylů hlavní stránky na ni přidejte odkaz - může být umístěn přímo za úvodní značku stylu: / * pro staré prohlížeče IE *
body {behavior: url ("csshover3.htc");}
