A helyszíni oldalak legördülő menüi a helytakarékosságra és a webes erőforrás szerkezetének logikus bemutatására szolgálnak. Ennek az elemnek számos megvalósítási módja van, az egyik legegyszerűbb az alábbiakban található.
Szükséges
HTML és CSS nyelvek alapismerete
Utasítás
1. lépés
A menü HTML kódja beágyazott listaelemeket (UL és LI) használ, amelyeken belül az oldalakra mutató hivatkozások kerülnek elhelyezésre. Nem tartalmaz összetett struktúrákat. A dinamikát CSS segítségével valósítják meg, amelynek leíró blokkja közvetlenül az oldal forráskódjába kerül. Nincs is benne semmi különös, emellett a szöveg tartalmaz néhány magyarázatot egyes stílusblokkok céljára.
2. lépés
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Legördülő menü * {
font-család: Verdana;
betűméret: 14 képpont;
} ul, li, a {
párnázás: 0;
kijelző: blokk;
határ: 0;
margó: 0;
} ul {
szegély: 1px szilárd #AAA;
szélesség: 150px;
list-style: nincs;
háttér: #FFF;
} li {
háttérszín: #AAA;
pozíció: rokon;
z-index: 9;
párnázás: 1px;
}
li.folder {háttér-szín: #AAA;}
li.folder ul {
pozíció: abszolút;
felső: 5px;
balra: 111px; / * IE böngészőkhöz * /
}
li.folder> ul {left: 140px;} / * más böngészőkhöz * / a {
párnázás: 2px;
szegély: 1px szilárd #FFF;
szövegdíszítés: nincs;
szélesség: 100%; / * IE böngészőkhöz * /
szín: # 000;
betű súlya: félkövér;
}
li> a {width: auto;} / * más böngészőkhöz * / li a {
szélesség: 140px;
kijelző: blokk;
} li a.submenu {
háttérszín: sárga;
} / * Linkek * /
a: lebeg {
szegélyszíne: szürke;
háttérszín: # FF0000;
fekete szín;
}
li.folder a: lebeg {
háttérszín: # FF0000;
} / * Mappák * /
ul ul, li: lebegés ul ul {display: none;}
li.folder: lebegés {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. oldal
-
2. Mappa
- 2.1 oldal
-
2.2 Mappa
- 2.2.1. Oldal
- 2.2.2. Oldal
- 2.2.3 oldal
- 2.3 oldal
-
3. Mappa
- 3.1 oldal
- 3.2 oldal
- 3.3 oldal
- 4. oldal
3. lépés
Ehhez a kódhoz hozzáadhatja az Internet Explorer böngészők régebbi verzióinak támogatását - a JavaScript segítségével (Peter Nederlof) valósítja meg. Töltse le a fájlt a szükséges kóddal, például erről a linkről - https://peterned.home.xs4all.nl/htc/csshover3.htc. A főoldallal megegyező mappába kell helyezni. És a főoldal stílusainak leírásában adjon hozzá egy linket - közvetlenül a nyitó stíluscímke után helyezhető el: / * régi IE böngészőknél *
body {viselkedés: url ("csshover3.htc");}
