Rozbaľovacie ponuky na stránkach stránok sa používajú na šetrenie miesta a na zabezpečenie logickej prezentácie štruktúry webového zdroja. Existuje mnoho spôsobov, ako implementovať tento prvok, jeden z najjednoduchších je uvedený nižšie.
Je to nevyhnutné
Základné znalosti jazykov HTML a CSS
Inštrukcie
Krok 1
HTML kód ponuky používa vnorené prvky zoznamu (UL a LI), vo vnútri ktorých sú umiestnené odkazy na stránky. Neobsahuje žiadne zložité štruktúry. Dynamika je implementovaná pomocou CSS, ktorého blok popisu je umiestnený priamo v zdrojovom kóde stránky. Nie je na tom nič zvláštne, okrem toho text obsahuje niektoré vysvetlenia účelu určitých štýlových blokov.
Krok 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
„https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Rozbaľovacia ponuka * {
rodina fontov: Verdana;
veľkosť písma: 14px;
} ul, li, a {
výplň: 0;
displej: blok;
ohraničenie: 0;
okraj: 0;
} ul {
orámovanie: 1px plná #AAA;
šírka: 150px;
štýl zoznamu: žiadny;
pozadie: #FFF;
} li {
farba pozadia: #AAA;
poloha: relatívna;
z-index: 9;
výplň: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
pozícia: absolútna;
vrchná strana: 5px;
vľavo: 111 pixelov; / * pre prehliadače IE * /
}
li.folder> ul {left: 140px;} / * pre ďalšie prehliadače * / a {
výplň: 2px;
orámovanie: 1px pevný #FFF;
dekorácia textu: žiadny;
šírka: 100%; / * pre prehliadače IE * /
farba: # 000;
váha písma: tučné;
}
li> a {width: auto;} / * pre ďalšie prehliadače * / li a {
šírka: 140px;
displej: blok;
} li a.submenu {
farba pozadia: žltá;
} / * Odkazy * /
a: hover {
farba okraja: šedá;
farba pozadia: # FF0000;
farba: čierna;
}
li.folder a: hover {
farba pozadia: # FF0000;
} / * Priečinky * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Strana
-
2. Priečinok
- 2,1 strana
-
2.2 Priečinok
- 2.2.1 Strana
- 2.2.2 Strana
- 2.2.3 Strana
- 2.3 Strana
-
3. Priečinok
- 3.1 strana
- 3,2 strany
- 3,3 strany
- 4. Strana
Krok 3
K tomuto kódu môžete pridať podporu pre staršie verzie prehľadávačov Internet Explorer - implementuje sa pomocou JavaScriptu (Peter Nederlof). Súbor s požadovaným kódom si musíte stiahnuť napríklad z tohto odkazu - https://peterned.home.xs4all.nl/htc/csshover3.htc. Musí byť umiestnený v rovnakom priečinku ako hlavná stránka. A v popise štýlov hlavnej stránky na ňu pridajte odkaz - môže byť umiestnený priamo za značku úvodného štýlu: / * pre staré prehliadače IE *
body {behavior: url ("csshover3.htc");}
