Rozwijane menu na stronach witryny służą do zaoszczędzenia miejsca i zapewniają logiczną prezentację struktury zasobu internetowego. Sposobów na zaimplementowanie tego elementu jest wiele, jeden z najprostszych podano poniżej.
Czy to jest to konieczne
Podstawowa znajomość języków HTML i CSS
Instrukcje
Krok 1
Kod HTML menu wykorzystuje zagnieżdżone elementy listy (UL i LI), wewnątrz których umieszczone są linki do stron. Nie zawiera skomplikowanych struktur. Dynamika realizowana jest za pomocą CSS, którego blok opisu umieszczony jest bezpośrednio w kodzie źródłowym strony. Nie ma w tym również nic specjalnego, poza tym tekst zawiera wyjaśnienia dotyczące przeznaczenia niektórych bloków stylów.
Krok 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
„https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Rozwijane menu * {
rodzina czcionek: Verdana;
rozmiar czcionki: 14px;
} ul, li, a {
wypełnienie: 0;
Blok wyświetlacza;
granica: 0;
margines: 0;
} ul {
obramowanie: 1px stałe #AAA;
szerokość: 150px;
styl listy: brak;
tło: #FFF;
} li {
kolor tła: #AAA;
pozycja: względna;
indeks z: 9;
wypełnienie: 1px;
}
li.folder {kolor-tła: #AAA;}
li.folder ul {
pozycja: bezwzględna;
góra: 5px;
lewy: 111px; / * dla przeglądarek IE * /
}
li.folder> ul {left: 140px;} / * dla innych przeglądarek * / a {
wypełnienie: 2px;
obramowanie: 1px stałe #FFF;
dekoracja tekstu: brak;
szerokość: 100%; / * dla przeglądarek IE * /
kolor: # 000;
grubość czcionki: pogrubiona;
}
li> a {width: auto;} / * dla innych przeglądarek * / li a {
szerokość: 140px;
Blok wyświetlacza;
} li a.podmenu {
kolor tła: żółty;
} / * Linki * /
a: najedź {
kolor obramowania: szary;
kolor tła: # FF0000;
kolor czarny;
}
li.folder a: najedź {
kolor tła: # FF0000;
} / * Foldery * /
ul ul, li: hover ul ul {wyświetlanie: brak;}
li.folder: hover {z-index: 10;}
li: unosić się ul, li: unosić się li: unosić się ul {wyświetlać: blok;}
- 1. Strona
-
2. Folder
- 2.1 Strona
-
2.2 Folder
- 2.2.1 Strona
- 2.2.2 Strona
- 2.2.3 Strona
- 2.3 Strona
-
3. Folder
- 3.1 Strona
- 3.2 Strona
- 3.3 Strona
- 4. Strona
Krok 3
Do tego kodu można dodać obsługę starszych wersji przeglądarek Internet Explorer - jest on zaimplementowany przy użyciu JavaScript (autorstwa Petera Nederlofa). Musisz pobrać plik z wymaganym kodem, na przykład z tego linku - https://petterned.home.xs4all.nl/htc/csshover3.htc. Musi być umieszczony w tym samym folderze co strona główna. A w opisie stylów strony głównej dodaj do niej link - można go umieścić bezpośrednio po tagu stylu otwierającego: /* dla starych przeglądarek IE*
body {zachowanie: url ("csshover3.htc");}
