Un menu avec des sections de sous-menus déroulants est utilisé dans la mise en page du site afin de présenter plus clairement la structure des sections et des sous-sections, tout en économisant de l'espace de page. Il n'est pas si difficile de mettre en œuvre un tel mécanisme: un des exemples de mise en œuvre est donné dans l'article.
Instructions
Étape 1
Vous trouverez ci-dessous le code source complet de la page. Les descriptions de styles sont placées directement dans le texte de la page. Ni le html ni le css de cette variante de l'implémentation du menu ne contiennent de constructions complexes nécessitant une explication détaillée.
É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 simple avec sous-sections
* {
famille de polices: arial;
taille de la police: 16px;
}
/ * pour les anciens navigateurs IE * /
body {comportement: url ("csshover.htc");}
ul, li, un {
bloc de visualisation;
marge: 0;
remplissage: 0;
bordure: 0;
}
ul {
largeur: 150px;
bordure: 1px argent massif;
fond: blanc;
style de liste: aucun;
}
li {
position: relative;
remplissage: 1px;
couleur de fond: argent;
indice z: 9;
}
li.folder {couleur de fond: argent;}
li.dossier ul {
position: absolue;
à gauche: 111 pixels; / * IE uniquement * /
haut: 5px;
}
li.folder> ul {left: 140px;} / * pour les autres * /
une {
remplissage: 2px;
bordure: 1 px blanc uni;
texte-décoration: aucun;
la couleur noire;
font-weight: gras;
largeur: 100 %; / * pour IE * /
}
li> a {largeur: auto;} / * pour les autres * /
li un {
bloc de visualisation;
largeur: 140px;
}
li a.sous-menu {
couleur de fond: jaune;
}
/ * Chapitres * /
a: survolez {
border-color: gris;
couleur de fond: rouge;
la couleur noire;
}
li.dossier a: survolez {
couleur de fond: rouge;
}
/ * Sections * /
li.folder: hover {z-index: 10;}
ul ul, li: survoler ul ul {afficher: aucun;}
li: survoler ul, li: survoler li: survoler ul {afficher: bloquer;}
- 1. Chapitre
-
2. Rubrique
- 2.1 Chapitre
-
2.2 Rubrique
- 2.2.1 Chapitre
- 2.2.2 Chapitre
- 2.2.3 Chapitre
- 2.3 Chapitre
-
3. Rubrique
- 3.1 Chapitre
- 3.2 Chapitre
- 3.3 Chapitre
- 4. Chapitre
Étape 3
Si vous souhaitez utiliser l'option de prise en charge des modifications de navigateur déjà obsolètes, une ligne supplémentaire doit être ajoutée au bloc de description de style (immédiatement après) (vous n'avez pas besoin d'ajouter de commentaire):
/ * pour les anciens navigateurs IE * /
body {comportement: url ("csshover.htc");}
Étape 4
Créez ensuite une page distincte dont le contenu est indiqué ci-dessous.
window. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(survol | actif | focus)) / i; var n = / (. *?):(survol | actif | focus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * on (survol | actif | focus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index: 0, liste: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {return this.list [(this.index ++)% this. list.length] }}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , rappels: {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l = a.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.imports) {try {var b = a. imports; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } essayez {var c = a. rules; var r = c.length; for (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: function (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (c) [1]; var f = c.replace (o, 'sur $ 1'); var g = c.replace (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; if (! this.callbacks ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': expression (CSSHover (this, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, patch: fonction (a, b, c, d) {essayez {var f = a.parentNode.currentStyle [d]; a.style [d] = f} catch (e) {a.runtimeStyle [d] = ''} if (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true; var g = new CSSHoverElement (a, b, c); this.elements.push (g)} return b}, décharger: function () {try {var l = this.elements.length; for (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; this.callbacks = {}} catch (e) {}}}; var x = {onhover: {activateur: 'onmouseenter', deactivator: 'onmouseleave'}, onactive: {activateur: 'onmousedown ', deactivator:' onmouseup '}, onfocus: {activateur:' onfocus', deactivator: 'onblur'}}; fonction CSSHoverElement (a, b, c) {this.node = a; ceci.t ype = b; var d = new RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = function () {a.className + = '' + c}; this.deactivator = function () {a.className = a.className.replace (d, '')}; a.attachEvent (x .activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {unload: function () {this.node.detachEvent (x [this.type]. activateur, this.activator); this.node.detachEvent (x [this.type].deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null } }; window.attachEvent ('onbeforeunload', function () {w.unload ()}); fonction de retour (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Étape 5
Cette page doit être enregistrée sous le nom csshover.htc et placée au même endroit que la page principale.
