Les menus déroulants sur les pages du site sont utilisés pour économiser de l'espace et fournir une présentation logique de la structure d'une ressource Web. Il existe de nombreuses façons d'implémenter cet élément, l'une des plus simples est donnée ci-dessous.
Il est nécessaire
Connaissance de base des langages HTML et CSS
Instructions
Étape 1
Le code HTML du menu utilise des éléments de liste imbriqués (UL et LI), à l'intérieur desquels sont placés des liens vers des pages. Il ne contient aucune structure complexe. La dynamique est mise en œuvre au moyen de CSS, dont le bloc de description est placé directement dans le code source de la page. Il n'y a rien de spécial non plus, d'ailleurs, le texte contient quelques explications sur le but de certains blocs de style.
Étape 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // FR"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu déroulant * {
famille de polices: Verdana;
taille de la police: 14 px;
} ul, li, un {
remplissage: 0;
bloc de visualisation;
bordure: 0;
marge: 0;
} ul {
bordure: 1px solide #AAA;
largeur: 150px;
style de liste: aucun;
arrière-plan: #FFF;
} li {
couleur d'arrière-plan: #AAA;
position: relative;
indice z: 9;
remplissage: 1px;
}
li.folder {couleur de fond: #AAA;}
li.dossier ul {
position: absolue;
haut: 5px;
à gauche: 111 pixels; / * pour les navigateurs IE * /
}
li.folder> ul {left: 140px;} / * pour les autres navigateurs * / a {
remplissage: 2px;
bordure: 1 px solide #FFF;
texte-décoration: aucun;
largeur: 100 %; / * pour les navigateurs IE * /
couleur: # 000;
font-weight: gras;
}
li> a {width: auto;} / * pour les autres navigateurs * / li a {
largeur: 140px;
bloc de visualisation;
} li a.sous-menu {
couleur de fond: jaune;
} / * Liens * /
a: survolez {
border-color: gris;
couleur d'arrière-plan: # FF0000;
la couleur noire;
}
li.dossier a: survolez {
couleur d'arrière-plan: # FF0000;
} / * Dossiers * /
ul ul, li: survoler ul ul {afficher: aucun;}
li.folder: hover {z-index: 10;}
li: survoler ul, li: survoler li: survoler ul {afficher: bloquer;}
- 1. Page
-
2. Dossier
- 2.1 pages
-
2.2 Dossier
- 2.2.1 Feuillet
- 2.2.2 Feuillet
- 2.2.3 Feuillet
- 2.3 pages
-
3. Dossier
- 3.1 Pages
- 3.2 Feuillets
- 3.3 Pages
- 4. Feuilleter
Étape 3
Vous pouvez ajouter la prise en charge des anciennes versions des navigateurs Internet Explorer à ce code - il est implémenté à l'aide de JavaScript (par Peter Nederlof). Vous devez télécharger le fichier avec le code requis, par exemple, à partir de ce lien - https://peterned.home.xs4all.nl/htc/csshover3.htc. Il doit être placé dans le même dossier que la page principale. Et dans la description des styles de la page principale, ajoutez-y un lien - il peut être placé directement après la balise de style d'ouverture: / * pour les anciens navigateurs IE *
body {comportement: url ("csshover3.htc");}
