Meniurile derulante de pe paginile site-ului sunt utilizate pentru a economisi spațiu și pentru a oferi o prezentare logică a structurii unei resurse web. Există multe modalități de a implementa acest element, una dintre cele mai simple este prezentată mai jos.
Este necesar
Cunoașterea de bază a limbajelor HTML și CSS
Instrucțiuni
Pasul 1
Codul HTML al meniului folosește elemente de listă imbricate (UL și LI), în interiorul cărora sunt plasate linkuri către pagini. Nu conține structuri complexe. Dinamica este implementată prin intermediul CSS, al cărui bloc de descriere este plasat direct în codul sursă al paginii. Nici nu este nimic special, în plus, textul conține câteva explicații cu privire la scopul anumitor blocuri de stil.
Pasul 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
„https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Meniu derulant * {
font-family: Verdana;
dimensiunea fontului: 14px;
} ul, li, a {
umplutură: 0;
display: bloc;
chenar: 0;
marja: 0;
} ul {
chenar: 1px solid #AAA;
lățime: 150px;
list-style: nici unul;
fundal: #FFF;
} li {
culoare de fundal: #AAA;
poziție: relativă;
index z: 9;
umplutură: 1 px;
}
li.folder {background-color: #AAA;}
li.folder ul {
poziție: absolută;
partea de sus: 5 px;
stânga: 111px; / * pentru browserele IE * /
}
li.folder> ul {left: 140px;} / * pentru alte browsere * / a {
umplutură: 2 px;
chenar: 1px solid #FFF;
decor-text: nici unul;
lățime: 100%; / * pentru browserele IE * /
culoare: # 000;
font-weight: bold;
}
li> a {width: auto;} / * pentru alte browsere * / li a {
lățime: 140px;
display: bloc;
} li a.submenu {
culoare de fundal: galben;
} / * Link-uri * /
a: hover {
culoarea chenarului: gri;
culoare de fundal: # FF0000;
culoarea neagra;
}
li.folder a: hover {
culoare de fundal: # FF0000;
} / * Dosare * /
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. Pagina
-
2. Dosar
- 2.1 Pagină
-
2.2 Dosar
- 2.2.1 Pag
- 2.2.2 Pag
- 2.2.3 Pag
- 2.3 Pag
-
3. Dosar
- 3.1 Pagină
- 3.2 Pagină
- 3.3 Pag
- 4. Pagina
Pasul 3
Puteți adăuga suport pentru versiuni mai vechi ale browserelor Internet Explorer la acest cod - este implementat folosind JavaScript (de Peter Nederlof). Trebuie să descărcați fișierul cu codul necesar, de exemplu, de pe acest link - https://peterned.home.xs4all.nl/htc/csshover3.htc. Acesta trebuie plasat în același folder cu pagina principală. Și în descrierea stilurilor paginii principale, adăugați un link către aceasta - poate fi plasat direct după eticheta de stil de deschidere: / * pentru browserele vechi IE *
corp {comportament: url ("csshover3.htc");}
