Transcript Aucun titre de diapositive

22 menus avec les
Feuilles de Styles en Cascade
CSS : Cascading Style Sheets
Téléchargement : http://icp.ge.ch/sem/cms-spip/spip.php?article626
Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800
François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève
Tél: +41 22 / 388-33-14, [email protected] - http://icp.ge.ch/sem/cms-spip/
22 menus en CSS
01- mvs - Menu vertical simple avec puces, sans puces, en boutons
02- mh - Menu horizontal simple, en boutons, avec commentaires
03- mv-s - Menu vertical - simple liste
04- mv-s - Menu vertical - simple liste
05.1- mb-r - Menu bouton Rollover
05.2- mb-rpc - Menu bouton rollover portes coulissantes
06- mv-rpc - Menu vertical rollover portes coulissantes
07- mh-rpc - Menu horizontal rollover portes coulissantes
08- mv-rpc - Menu vertical rollover portes coulissantes
09- mvad-g-1r2c - Menu vertical arborescent dynamique gauche 1 règle 2 classes par niveau
10- mvad-g-2r1c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau
11- mvad-d-1r1c - Menu vertical arborescent dynamique droit 1 règle 1 classe par niveau
12- mvad-g-2r0c - Menu vertical arborescent dynamique gauche 2 règles par niveau flèche-gif
13- mvad-g-mr0c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux
14- mvad-d-mr0c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux
15.1- mvad-g-mr1c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux
15.2- mvad-d-mr1c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux
16- mhad-2niv - Menu horizontal arborescent dynamique 2 niveaux
17- mhvad-g-2r2c - Menu horizontal vertical arborescent dynamique gauche 2 règles 2 classes par niveau
18- mhvad-mr0c- Menu horizontal vertical arborescent dynamique gauche mêmes règles tous niveaux
19- mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n1 règles n2 classes par n
20- mhvad-mr0c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous niveaux
21- mvad-mr0c- Menu vertical arborescent dynamique 0 classe mêmes règles tous niveaux
22-mvac-mr0c-javascript-memes-regles-tous-niveaux_SPIP
1.1. mvs - Menu vertical simple avec puces
<ul id="menu">
<li><a href="lien1.htm">Lien 1</a></li>
<li><a href="lien2.htm">Lien 2</a></li>
<li><a href="lien3.htm">Lien 3</a></li>
<li><a href="lien4.htm">Lien 4</a></li>
<li><a href="lien5.htm">Lien 5</a></li>
<li><a href="lien6.htm">Lien 6</a></li>
</ul>
ul#menu {
margin: 0;
font-family: Arial;
list-style-type: circle;
}
#menu a {
text-decoration: none;
font-weight: normal;
line-height: 25px;
color: #993300;
font-family: arial;
}
#menu a:hover {
margin: 0px;
padding: 0px;
font-weight: bold;
color: #009900;
font-family: Arial;
}
1.2. mvs - Menu vertical simple sans puce
<ul id="menu">
<li><a href="lien1.htm">Lien 1</a></li>
<li><a href="lien2.htm">Lien 2</a></li>
<li><a href="lien3.htm">Lien 3</a></li>
<li><a href="lien4.htm">Lien 4</a></li>
<li><a href="lien5.htm">Lien 5</a></li>
<li><a href="lien6.htm">Lien 6</a></li>
</ul>
ul#menu {
margin: 0px;
padding: 0px;
font-family: Arial;
list-style-type: none;
}
#menu a {
text-decoration: none;
font-weight: normal;
line-height: 25px;
color: #993300;
font-family: arial;
}
#menu a:hover {
margin: 0px;
padding: 0px;
font-weight: bold;
color: #009900;
font-family: Arial;
}
1.3. mvs-b - Menu vertical simple en boutons
<ul id="menu">
<li><a href="lien1.htm">Lien 1</a></li>
<li><a href="lien2.htm">Lien 2</a></li>
<li><a href="lien3.htm">Lien 3</a></li>
<li><a href="lien4.htm">Lien 4</a></li>
<li><a href="lien5.htm">Lien 5</a></li>
<li><a href="lien6.htm">Lien 6</a></li>
</ul>
ul#menu {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
list-style-type: none;
}
#menu a {
border: 1px solid #cccccc;
margin: 3px 0px;
display: block;
text-decoration: none;
font-weight: normal;
line-height: 25px;
color: #993300;
font-family: arial;
width: 80px;
background-color: #cccccc;
text-align: center;
}
#menu a:hover {
margin: 3px 0px;
padding: 0px;
font-weight: bold;
color: #009900;
font-family: Arial;
background-color: #99ff99;
}
1.4. mvs-br - Menu vertical simple en boutons relief
<ul id="menu">
<li><a href="lien1.htm">Lien 1</a></li>
<li><a href="lien2.htm">Lien 2</a></li>
<li><a href="lien3.htm">Lien 3</a></li>
<li><a href="lien4.htm">Lien 4</a></li>
<li><a href="lien5.htm">Lien 5</a></li>
<li><a href="lien6.htm">Lien 6</a></li>
</ul>
#menu a {
border-style: solid;
border-color: #ccc #666 #666 #ccc;
border-width: 1px 2px 2px 1px;
margin: 5px 0px;
ul#menu {
#menu a:hover {
display: block;
margin: 0;
border-style: solid;
text-decoration: none;
padding: 0;
border-color: #666 #ccc #ccc #666;
font-family: Arial,Helvetica,sans-serif; font-weight: normal;
border-width: 2px 1px 1px 2px;
line-height: 25px;
font-size: 1em;
margin: 5px 0px;
color: #930;
list-style-type: none;
padding: 0px;
font-family: arial;
}
font-weight: bold;
width: 80px;
color: #090;
text-align: center;
font-family: Arial;
background-color: #fcc;
background-color: #9f9;
}
}
2.1. mh - Menu horizontal simple
ul#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: Arial;
}
#menu a {
text-decoration: none;
font-weight: bold;
line-height: 25px;
color: #930;
font-family: arial;
}
<ul id="menu">
<li><a href="lien1.htm">Lien 1</a> | </li>
<li><a href="lien2.htm">Lien 2</a> | </li>
<li><a href="lien3.htm">Lien 3</a> | </li>
<li><a href="lien4.htm">Lien 4</a> | </li>
<li><a href="lien5.htm">Lien 5</a> | </li>
<li><a href="lien6.htm">Lien 6</a> | </li>
</ul>
#menu a:hover {
margin: 0px;
padding: 0px;
color: #090;
font-family: Arial;
}
#menu li {
display: inline;
margin: 0 5px;
}
2.2. mh-b - Menu horizontal boutons
ul#menu {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
list-style-type: none;
}
#menu a {
border-style: solid;
border-color: #ccc #666 #666 #ccc;
border-width: 1px 2px 2px 1px;
margin: 0px;
padding: 0px;
display: block;
text-decoration: none;
font-weight: normal;
line-height: 25px;
color: #930;
font-family: arial;
width: 80px;
text-align: center;
background-color: #ffcccc;
}
<ul id="menu">
<li><a href="lien1.htm">Lien 1</a></li>
<li><a href="lien2.htm">Lien 2</a></li>
<li><a href="lien3.htm">Lien 3</a></li>
<li><a href="lien4.htm">Lien 4</a></li>
<li><a href="lien5.htm">Lien 5</a></li>
<li><a href="lien6.htm">Lien 6</a></li>
</ul>
#menu a:hover {
border-style: solid;
border-color: #666 #ccc #ccc #666;
border-width: 2px 1px 1px 2px;
margin: 0px;
padding: 0px;
font-weight: bold;
color: #090;
font-family: Arial;
background-color: #9f9;
}
#menu li {
float: left;
}
2.3. mh-b - Menu horizontal boutons espacés
ul#menu {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
list-style-type: none;
}
#menu a {
border-style: solid;
border-color: #ccc #666 #666 #ccc;
border-width: 1px 2px 2px 1px;
margin: 0px 5px 0px 0px;
padding: 0px;
display: block;
text-decoration: none;
font-weight: normal;
line-height: 25px;
color: #993300;
font-family: arial;
width: 80px;
text-align: center;
background-color: #ffcccc;
}
<ul id="menu">
<li><a href="lien1.htm">Lien 1</a></li>
<li><a href="lien2.htm">Lien 2</a></li>
<li><a href="lien3.htm">Lien 3</a></li>
<li><a href="lien4.htm">Lien 4</a></li>
<li><a href="lien5.htm">Lien 5</a></li>
<li><a href="lien6.htm">Lien 6</a></li>
</ul>
#menu a:hover {
border-style: solid;
border-color: #666 #ccc #ccc #666;
border-width: 2px 1px 1px 2px;
margin: 0px;
padding: 0px;
font-weight: bold;
color: #009900;
font-family: Arial;
background-color: #99ff99;
}
#menu li {
float: left;
}
2.4. mh-bc - Menu horizontal boutons commentaires
<ul id="menu">
<li><a href="lien1.htm">Lien 1<span>commentaire 1...</span></a></li>
<li><a href="lien2.htm">Lien 2<span>commentaire 2...</span></a></li>
<li><a href="lien3.htm">Lien 3<span>commentaire 3...</span></a></li>
<li><a href="lien4.htm">Lien 4<span>commentaire 4...</span></a></li>
<li><a href="lien5.htm">Lien 5<span>commentaire 5...</span></a></li>
<li><a href="lien6.htm">Lien 6<span>commentaire 6...</span></a></li>
</ul>
2.4. mh-bc - Menu horizontal boutons commentaires
<ul id="menu">
<li><a href="lien1.htm">Lien 1<span>commentaire 1...</span></a></li>
<li><a href="lien2.htm">Lien 2<span>commentaire 2...</span></a></li>
<li><a href="lien3.htm">Lien 3<span>commentaire 3...</span></a></li>
<li><a href="lien4.htm">Lien 4<span>commentaire 4...</span></a></li>
<li><a href="lien5.htm">Lien 5<span>commentaire 5...</span></a></li>
<li><a href="lien6.htm">Lien 6<span>commentaire 6...</span></a></li>
</ul>
ul#menu {margin: 0; padding: 0; font-family: Arial,Helvetica,sans-serif; font-size: 1em;
list-style-type: none;}
#menu a {border-style: solid; border-color: #cccccc #666666 #666666 #cccccc;
border-width: 1px 2px 2px 1px; margin: 0px; padding: 0px; display: block; textdecoration: none; font-weight: normal; line-height: 25px; color: #993300;
font-family: arial; width: 80px; text-align: center; background-color: #ffcccc;}
#menu a:hover {border-style: solid; border-color: #666666 #cccccc #cccccc #666666;
border-width: 2px 1px 1px 2px; margin: 0px; padding: 0px; font-weight: bold;
color: #009900; font-family: Arial; background-color: #99ff99;}
#menu a span {display: none;}
#menu a:hover span {background: #e6ffe6 none repeat scroll 0% 50%; display: block;
position: absolute; top: 60px; left: 9px; width: 497px; text-align: left;
font-family: Arial,Helvetica,sans-serif; font-weight: normal;
font-style: normal; text-transform: none; color: black; font-size: 0.8em;}
#menu li {float: left;}
3.1. mv-s - Menu vertical - simple liste
<ul id="menu">
<li><a href="lien1.htm">Gibson</a></li>
<li><a href="lien2.htm">Fender</a></li>
<li><a href="lien3.htm">Rickenbacker</a></li>
<li><a href="lien4.htm">Washburn</a></li>
</ul>
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size:.75em; margin:20px;}
div#listcontainer ul {border:0; margin:12px 20px 12px 1.25em; padding:0; list-style-type:none;}
div#listcontainer li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-indent:.5em}
div#listcontainer li:first-child {border-top:2px solid #069;}
div#listcontainer a {text-decoration:none; color:#069;}
div#listcontainer a:hover {color: #F33;}
/* a hack for IE Win only \*/
* html div#listcontainer ul {border-top:2px solid #069;}
Sources : http://www.bbd.com/stylin/
This is the companion web site for the book
"Stylin' with CSS - a designer's guide"
published by New Riders Books, May 2005.
3.2. mv-s - Menu vertical - simple liste
<ul id="menu">
<li><a href="lien1.htm">Gibson</a></li>
<li><a href="lien2.htm">Fender</a></li>
<li><a href="lien3.htm">Rickenbacker</a></li>
<li><a href="lien4.htm">Washburn</a></li>
</ul>
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size:.75em; margin:20px;}
div#listcontainer ul {border:0; margin:12px 20px 12px 1.25em; padding:0; list-style-type:none;}
div#listcontainer li {border-top:1px solid #069; border-left:4px solid #069; margin:0 0 4px 0;
padding:.3em 0; text-indent:.5em;}
div#listcontainer a {text-decoration:underline; color:#069;}
div#listcontainer a:hover {text-decoration:none; color: #F33;}
3.3. mv-s - Menu vertical - simple liste
<ul id="menu">
<li><a href="lien1.htm">Gibson</a></li>
<li><a href="lien2.htm">Fender</a></li>
<li><a href="lien3.htm">Rickenbacker</a></li>
<li><a href="lien4.htm">Washburn</a></li>
</ul>
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size:.75em; margin:20px;}
div#listcontainer ul {border:0; margin:12px 20px 12px 1.25em; padding:0; list-style-type:none;}
div#listcontainer li {border-left:4px solid #069; margin:0 0 4px 0; padding:.3em 0;
text-indent:.5em; background-color:#CCF;}
div#listcontainer a {text-decoration:underline; color:#069;}
div#listcontainer a:hover {text-decoration:none; color: #F33;}
4.1. mv-s - Menu vertical - simple liste
<div id="sidebar">
<h4>Other Mutters</h4>
<ul>
<li><a href="lien1.htm">13 September 2002</a></li>
<li><a href="lien2.htm">6 September 2002</a></li>
<li><a href="lien3.htm">25 October 2002</a></li>
<li><a href="lien4.htm">8 November 2002</a></li>
<li><a href="lien5.htm">14 November 2002</a></li>
<li><a href="lien6.htm">17 November 2002</a></li>
<li><a href="lien7.htm">3 December 2002</a></li>
<li><a href="lien8.htm">4 December 2002</a></li>
</ul>
</div>
html {margin: 0; padding: 0;}
body {font: 80% Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0;
background: rgb(95%,95%,80%); color: black;}
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; text-align: center;}
#sidebar ul {list-style: none; margin: 0; padding: 0 0 10px;
border: 1px solid rgb(73%,73%,58%);}
#sidebar h4, #sidebar ul {margin: 0 6px 0 0;}
#sidebar li {padding: 0.5em 0; border-bottom: 1px solid rgb(84%,84%,69%);}
#sidebar a {text-decoration: none; padding: 0 0.25em;
border: 1px solid rgb(84%,84%,69%);}
#sidebar a:link {color: rgb(20%,40%,0%);}
#sidebar a:visited {color: rgb(58%,68%,40%);}
#sidebar a:hover {color: rgb(10%,20%,0%); background: #FFF;}
Sources :
http://more.ericmeyeroncss.
com/dloads/
Référence : More Eric
Meyer on CSS.
4.2. mv-s - Menu vertical - simple liste
<div id="sidebar"><h4>Other Mutters</h4>
<ul>
<li><a href="lien1.htm">13 September 2002</a></li>
<li><a href="lien2.htm">6 September 2002</a></li>
<li><a href="lien3.htm">25 October 2002</a></li>
<li><a href="lien4.htm">8 November 2002</a></li>
<li><a href="lien5.htm">14 November 2002</a></li>
<li><a href="lien6.htm">17 November 2002</a></li>
<li><a href="lien7.htm">3 December 2002</a></li>
<li><a href="lien8.htm">4 December 2002</a></li>
</ul>
</div>
html {margin: 0; padding: 0;}
body {font: 80% Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0;
background: rgb(95%,95%,80%); color: black;}
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; text-align: center;}
#sidebar ul {list-style: none; margin: 0; padding: 0 0 10px;
border: 1px solid rgb(73%,73%,58%);}
#sidebar h4, #sidebar ul {margin: 0 6px 0 0;}
#sidebar li {padding: 0.5em 0; line-height: 1em;
border-bottom: 1px solid rgb(84%,84%,69%);}
#sidebar a {text-decoration: none; padding: 0 0.25em; border: 1px solid
rgb(84%,84%,69%); background: rgb(95%,95%,80%); position: relative; top: 1em;}
#sidebar a:link {color: rgb(20%,40%,0%);}
#sidebar a:visited {color: rgb(58%,68%,40%);}
#sidebar a:hover {color: rgb(10%,20%,0%); background: #FFF;}
5.1. mb-r - Menu bouton Rollover
<body bgcolor="#ffffff">
<div class="button">
<a class="roll" href="#">Graphics</a>
</div>
</body>
body {font-family: verdana, arial, sans-serif; font-size:1em;}
div.button {width:120px; height:24px; top:0px; left: 0px; border: 1px #000 solid;}
a.roll {width:120px; height:24px; display:block; padding-top:2px;
font: bold 10pt; text-align:center; }
div.button a.roll:link {color: black; text-decoration:none;}
div.button a.roll:visited {color: black; text-decoration:none;}
div.button a.roll:hover {color:#069; text-decoration:underline;}
div.button a.roll:active {color:#CCC;}
Sources : http://www.bbd.com/stylin/ Companion web site for the book "Stylin' with CSS - a designer's guide" published by New Riders Books, May 2005.
5.2. mb-rpc - Menu bouton rollover portes coulissantes
Image composée de 4 bandes horizontales placée dans le bouton unique
selon 4 positions verticales en fonction des actions de la souris
<body bgcolor="#ffffff">
<div class="button">
<a class="roll" href="#">Graphics</a>
</div>
</body>
div.button {width:120px; height:24px; top:0px; left: 0px;
border: 1px #000 solid;}
a.roll {width:120px; height:20px; padding-top:4px; display:block;
font: bold 10pt verdana, sans-serif; text-align:center; background:
url("images_pres/four_state_roll_bg.gif") 0px 0px no-repeat #000;}
div.button a.roll:link {background-position: 0px 0px; color: black;
text-decoration:none;}
div.button a.roll:visited {background-position: 0px -25px; color: green;}
div.button a.roll:hover {background-position: 0px -50px; color:#069;}
div.button a.roll:active {background-position: 0px -75px; color:white;}
L’image unique
composée de 4
bandes horizontales
est chargée une fois
à l’appel de la page
et est ensuite
instantanément
disponible pour
chaque
déplacement dû à
l’action de survol ou
de clic de la souris
(:link, :active, :over,
:visited)
6. mv-rpc - Menu vertical rollover portes coulissantes
Image composée de 2 bandes horizontales placée dans les 6 boutons du menu
vertical selon 2 positions verticales en fonction des actions de la souris
<div id="menu5">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
#menu5 {width: 200px; margin: 10px;}
#menu5 li a {height: 32px; voice-family: "\"}\""; voice-family: inherit;
height: 24px; text-decoration: none;}
#menu5 li a:link, #menu5 li a:visited {color: #FFF; display: block;
background: url(menu5.gif); padding: 8px 0 0 10px;}
#menu5 li a:hover {color: #FFF; background:
url(menu5.gif) 0 -32px; padding: 8px 0 0 10px;}
L’image unique
composée de 2
bandes horizontales
est chargée une fois à
l’appel de la page et
est ensuite
instantanément
disponible pour
chaque déplacement
dû à l’action de survol
ou de clic de la souris
(:link, :active, :over,
:visited)
Sources : http://www.exploding-boy.com/ Free CSS Vertical Menu Designs at exploding-boy.com.
7. mh-rpc - Menu horizontal rollover
portes coulissantes (1/3)
Image composée de 2 bandes horizontales placée dans les 7 boutons du menu
horizontal selon 2 positions verticales en fonction des actions de la souris
tableft2.gif
tabright2.gif
<div id="tabs2">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer
Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
L’image unique
composée de 2
bandes horizontales
est chargée une fois à
l’appel de la page et
est ensuite
instantanément
disponible pour
chaque déplacement
dû à l’action de survol
ou de clic de la souris
(:link, :active, :over,
:visited)
Sources : http://exploding-boy.com/images/cssmenus/menus.html Free CSS Vertical Menu Designs at exploding-boy.com.
tableft2.gif
7. mh-rpc - Menu horizontal rollover
portes coulissantes (2/3)
tabright2.gif
#tabs2 {float:left; width:100%; font-size:93%; line-height:normal;
border-bottom:1px solid #84776B;}
#tabs2 ul {margin:0; padding:10px 10px 0 50px; list-style:none;}
#tabs2 li {display:inline; margin:0; padding:0;}
#tabs2 a {float:left; background:url("tableft2.gif") no-repeat left top;
margin:0; padding:0 0 0 4px; text-decoration:none;}
#tabs2 a span {float:left; display:block; background:url("tabright2.gif") no-repeat
right top; padding:5px 15px 4px 6px; color:#84776B;}
#tabs2 a:hover span {color:#74675B;}
#tabs2 a:hover {background-position:0% -42px;}
#tabs2 a:hover span {background-position:100% -42px;}
7. mh-rpc - Menu horizontal rollover
portes coulissantes (3/3)
<div id="tabs2">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
#tabs2 {float:left; width:100%; font-size:93%; line-height:normal;
border-bottom:1px solid #84776B;}
#tabs2 ul {margin:0; padding:10px 10px 0 50px; list-style:none;}
#tabs2 li {display:inline; margin:0; padding:0;}
#tabs2 a {float:left; background:url("tableft2.gif") no-repeat left top;
margin:0; padding:0 0 0 4px; text-decoration:none;}
#tabs2 a span {float:left; display:block; background:url("tabright2.gif") no-repeat
right top; padding:5px 15px 4px 6px; color:#84776B;}
#tabs2 a:hover span {color:#74675B;}
#tabs2 a:hover {background-position:0% -42px;}
#tabs2 a:hover span {background-position:100% -42px;}
L’image unique
composée de 2
bandes
horizontales
est chargée une
fois à l’appel de la
page et est ensuite
instantanément
disponible pour
chaque
déplacement dû à
l’action de survol
ou de clic de la
souris (:link,
:active, :over,
:visited)
8. mv-rpc - Menu vertical rollover portes coulissantes
L’image unique composée de 2 images est chargée une fois à l’appel de la page et est ensuite
instantanément disponible pour chaque déplacement dû à l’action de survol ou de clic de la
souris (:link, :active, :over et :visited) sur les 7 boutons horizontaux du menu.
Image
composée
de 2 images
identiques,
l’une foncée
l’autre
éclaircie,
placées l’une
au dessus
de l’autre, ...
… placée dans
le menu
constitué de 7
boutons
horizontaux,
déplacée en
vertical en
fonction des
actions de la
souris pour
afficher une
bande de
l’image
duplicata dans
le bouton
sélectionné.
Sources : http://www.alsacreations.com/livre/?/Exemples/extreize - Alsacréation : CSS2 Pratique du design web.
8. mv-rpc - Menu vertical rollover portes coulissantes
<ul>
<li><a id="lien1" href="#">Accueil</a></li>
<li><a id="lien2" href="#">Messageries</a></li>
<li><a id="lien3" href="#">Chat</a></li>
<li><a id="lien4" href="#">Forums</a></li>
<li><a id="lien5" href="#">Vidéo-conférences</a></li>
<li><a id="lien6" href="#">CMS</a></li>
<li><a id="lien7" href="#">Moodle</a></li>
</ul>
ul, li {margin: 0;paddi ng: 0px; list-style-type: none;}
ul {background: transparent url(mv-rpc-2.jpg) no-repeat scroll left top; position: absolute;
top: 50px; left: 20%; width: 300px; height: 280px; text-align: center;}
li {display: inline;}
li a {display: block; height: 40px; width: 300px; font-family: Georgia; font-size: 18px;
text-decoration: none; line-height: 40px; font-weight: normal; color: #ffd6d6;}
li a:hover {background: transparent url(mv-rpc-2.jpg) no-repeat scroll left top; color: white;}
a#lien1:hover {background-position: 0% -280px; font-weight: bolder; font-size: 24px;}
a#lien2:hover {background-position: 0% -320px; font-weight: bolder; font-size: 24px;}
a#lien3:hover {background-position: 0% -360px; font-weight: bolder; font-size: 24px;}
a#lien4:hover {background-position: 0% -400px; font-weight: bolder; font-size: 24px;}
a#lien5:hover {background-position: 0% -440px; font-weight: bolder; font-size: 24px;}
a#lien6:hover {background-position: 0% -480px; font-weight: bolder; font-size: 24px;}
a#lien7:hover {background-position: 0% -520px; font-weight: bolder; font-size: 24px;}
9. mvad-g-1r2c - Menu vertical arborescent
dynamique gauche 1 règle 2 classes par niveau (1/3)
2 classes différentes
par niveau
1 classe identique par niveau : class="submenu"
1 classe différente par niveau : class="level1" pour le menu de niveau 1
class="level2" pour le menu de niveau 2
class="level3" pour le menu de niveau 3
Même code HTML que pour
class="level4" pour le menu de niveau 4
class="level5" pour le menu de niveau 5
17. mhvad-g-2r2c
...
Sources : http://more.ericmeyeroncss.com/dloads/ Référence : More Eric Meyer on CSS.
9. mvad-g-1r2c
(2/3)
<div id="nav">
<ul class="level1">
1 classe identique par niveau :
<li><a href="/">Home</a></li>
<li class="submenu"><a href="/services/">Services</a> class="submenu »
et
<ul class="level2">
<li><a href="/services/strategy/">Strategy</a></li>
1 classe différente par niveau :
<li><a href="/services/optimize/">Optimization</a></li> class="level1" pour le menu de niveau 1
<li><a href="/services/guidance/">Guidance</a></li>
class="level2" pour le menu de niveau 2
class="level3" pour le menu de niveau 3
<li><a href="/services/training/">Training</a></li>
class="level4" pour le menu de niveau 4
</ul>
class="level5" pour le menu de niveau 5
</li>
...
<li><a href="/events/">Events</a></li>
<li class="submenu"><a href="/pubs/">Publications</a>
<ul class="level2">
Même code HTML que pour
<li><a href="/pubs/articles/">Articles</a></li>
17. mhvad-g-2r2c
<li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
<ul class="level3">
...
<li><a href="/pubs/tuts/html/">HTML</a></li>
</li>
<li class="submenu"><a href="/pubs/tuts/css/">CSS</a>
<li><a href="/pubs/tuts/svg/">SVG</a><
<li><a href="/pubs/tuts/xml/">XML</a><
<ul class="level4">
</ul>
<li><a href="/pubs/tuts/html/">Genève</a></li>
</li>
<li><a href="/pubs/tuts/css/">Lausanne</a></li>
<li><a href="/pubs/wpapers/">White Pape
<li><a href="/pubs/comment/">Commenta
<li><a href="/pubs/tuts/svg/">Fribourg</a></li>
</ul>
<li><a href="/pubs/tuts/xml/">Berne</a></li>
</li>
</ul>
<li><a href="/contact/">Contact</a></li>
</ul>
...
</div>
9. mvad-g-1r2c - Menu vertical arborescent
dynamique gauche 1 règle 2 classes par niveau (3/3)
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none;
width: 6.5em;}
1 règle par niveau
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;}
div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3,
div#nav ul.level2 li.submenu ul.level3 li.submenu:hover ul.level4 {display:block;}
10. mvad-g-2r1c - Menu vertical arborescent
dynamique gauche 2 règles 1 classe par niveau (1/6)
2 règles différentes par niveau
1 classe identique par niveau : class="sub"
Sources : http://www.cssplay.co.uk/menus/ - Référence : CSSplay - Experiment with Cascading Style Sheets
10. mvad-g-2r1c - Menu vertical arborescent
dynamique gauche 2 règles 1 classe par niveau (2/6)
1 classe identique par niveau :
class="sub"
<div class="menu">
<ul>
<li><a href="lien1.htm">Item 1</a></li>
<li><a href="lien2.htm">Item 2</a></li>
<li class="sub"><a href="lien3.htm">Item 3 »</a>
<ul>
<li><a href="../lien31.htm">Item 3.1</a></li>
<li class="sub"><a href="lien32.htm">Item3.2 »</a>
<ul>
<li><a href="lien321.htm">Item 3.2.1</a></li>
<li><a href="lien322.htm">Item 3.2.2</a></li>
<li class="sub"><a href="lien323.htm">Item 3.2.3&nbsp; »</a>
<ul>
<li><a href="lien3231.htm">Item 3.2.3.1</a></li>
<li><a href="lien3232.htm">Item 3.2.3.2</a></li>
<li><a href="lien3233.htm">Item 3.2.3.3</a></li>
<li><a href="lien3234.htm">Item 3.2.3.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="lien33.htm">Item 3.3</a></li>
</ul>
</li>
<li><a href="lien4.htm">Item 4</a></li>
<li><a href="lien5.htm">Item 5</a></li>
<li><a href="lien6.htm">Item 6</a></li>
</ul>
</div>
10. mvad-g-2r1c - Menu vertical arborescent
dynamique gauche 2 règles 1 classe par niveau (3/6)
.menu {z-index:1000; font-size:90%; margin:25px 0 50px 15px; /* this page only */}
.menu ul {padding:0; margin:0; list-style-type:none; width:150px;}
/* position relative so that you can position the sub levels */
.menu li {position:relative; background:#d4d8bd; height:26px;}
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; fontsize:1em;}
.menu a, .menu a:visited {display:block; text-decoration:none; height:25px; line-height:25px;
width:149px; color:#000; text-indent:5px; border:1px solid #fff; border-width:0 1px 1px 0;}
* html .menu a:hover {color:#fff; background:#949e7c;}
.menu :hover > a {color:#fff; background:#949e7c;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden; position:absolute; top:0; left:150px; }
/* make the second level visible when hover on first level list OR link */
2 règles par niveau
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
10. mvad-g-2r1c - Menu vertical arborescent
dynamique gauche 2 règles 1 classe par niveau (4/6)
2 règles différentes par niveau
1 classe identique par niveau : class="sub"
10. mvad-g-2r1c - Menu vertical arborescent
dynamique gauche 2 règles 1 classe par niveau (5/6)
1 classe identique par niveau : class="sub"
<div class="menu">
<ul>
<li><a href="lien1.htm">Item 1</a></li>
<li><a href="lien2.htm">Item 2</a></li>
<li class="sub"><a href="lien3.htm">Item 3 »</a>
<ul>
<li><a href="lien31.htm">Item 3.1</a></li>
<li class="sub"><a href="lien32.htm">Item3.2 »</a>
<ul>
<li><a href="lien321.htm">Item 3.2.1</a></li>
<li><a href="lien322.htm">Item 3.2.2</a></li>
<li class="sub"><a href="lien323.htm">Item 3.2.3&nbsp; »</a>
<ul>
<li><a href="lien3231.htm">Item 3.2.3.1</a></li>
<li class="sub"><a href="lien3232.htm">Item3.2.3.2&nbsp; »</a>
<ul>
<li><a href="lien32321.htm">Item 3.2.3.2.1</a></li>
<li><a href="lien32322.htm">Item 3.2.3.2.2</a></li>
<li><a href="lien32323.htm">Item 3.2.3.2.3</a></li>
<li><a href="lien32324.htm">Item 3.2.3.2.4</a></li>
</ul>
</li>
<li><a href="lien3233.htm">Item 3.2.3.3</a></li>
<li><a href="lien3234.htm">Item 3.2.3.4</a></li>
</ul>
</li>
</ul>
</ul>
</li>
</li>
</ul>
<li><a href="lien33.htm">Item
</li> 3.3</a></li>
</ul>
<li><a href="lien33.htm">Item 3.3</a></li>
</li>
</ul>
<li><a href="lien4.htm">Item
</li> 4</a></li>
<li><a href="lien5.htm">Item
<li><a5</a></li>
href="lien4.htm">Item 4</a></li>
<li><a href="lien6.htm">Item
<li><a6</a></li>
href="lien5.htm">Item 5</a></li>
</ul>
<li><a href="lien6.htm">Item 6</a></li>
</div>
</ul>
</div>
10. mvad-g-2r1c - Menu vertical arborescent
dynamique gauche 2 règles 1 classe par niveau (6/6)
.menu {z-index:1000; font-size:90%; margin:25px 0 50px 15px; /* this page only */}
.menu ul {padding:0; margin:0; list-style-type:none; width:150px;}
/* position relative so that you can position the sub levels */
.menu li {position:relative; background:#d4d8bd; height:26px;}
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
.menu a, .menu a:visited {display:block; text-decoration:none; height:25px; line-height:25px; width:149px; color:#000; textindent:5px; border:1px solid #fff; border-width:0 1px 1px 0;}
* html .menu a:hover {color:#fff; background:#949e7c;}
.menu :hover > a {color:#fff; background:#949e7c;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden; position:absolute; top:0; left:150px; }
/* make the second level visible when hover on first level list OR link */
2 règles par niveau
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* keep the fifth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
/* make the fifth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul :hover ul {visibility:visible;}
11. mvad-d-1r1c - Menu vertical arborescent
dynamique droit 1 règle 1 classe par niveau (1/3)
1 règle différente par niveau
1 classe identique par niveau : class="sub"
Sources : http://www.cssplay.co.uk/menus/ - Référence : CSSplay - Experiment with Cascading Style Sheets
11. mvad-d-1r1c - Menu vertical arborescent
dynamique droit 1 règle 1 classe par niveau (2/3)
<div class="menu">
<ul>
<li><a href="lien1.htm">Item 1</a></li>
<li><a href="lien2.htm">Item 2</a></li>
<li class="sub"><a href="lien3.htm">Item 3 «</a>
<ul>
<li><a href="../lien31.htm">Item 3.1</a></li>
<li class="sub"><a href="lien32.htm">Item3.2 «</a>
<ul>
<li><a href="lien321.htm">Item 3.2.1</a></li>
<li><a href="lien322.htm">Item 3.2.2</a></li>
<li class="sub"><a href="lien323.htm">Item 3.2.3&nbsp; «</a>
<ul>
<li><a href="lien3231.htm">Item 3.2.3.1</a></li>
1 classe
<li><a href="lien3232.htm">Item 3.2.3.2</a></li>
<li><a href="lien3233.htm">Item 3.2.3.3</a></li>
<li><a href="lien3234.htm">Item 3.2.3.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="lien33.htm">Item 3.3</a></li>
</ul>
</li>
<li><a href="lien4.htm">Item 4</a></li>
<li><a href="lien5.htm">Item 5</a></li>
<li><a href="lien6.htm">Item 6</a></li>
</ul>
</div>
identique par niveau : class="sub"
11. mvad-d-1r1c - Menu vertical arborescent
dynamique droit 1 règle 1 classe par niveau (3/3)
.menu {z-index:1000; font-size:90%; float:right; margin:25px 0 50px 15px; /* this page only */}
.menu ul {padding:0; margin:0; list-style-type:none; width:150px;}
/* position relative so that you can position the sub levels */
.menu li {position:relative; background:#d4d8bd; height:26px;}
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; fontsize:1em;}
.menu a, .menu a:visited {display:block; text-decoration:none; height:25px; line-height:25px;
width:149px; color:#000; text-indent:5px; border:1px solid #fff; border-width:0 1px 1px 0;}
* html .menu a:hover {color:#fff; background:#949e7c;}
.menu :hover > a {color:#fff; background:#949e7c;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden; position:absolute; top:0; left:-150px; }
/* make the second level visible when hover on first level list OR link */
1 règle par niveau
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
12. mvad-g-2r0c - Menu vertical arborescent
dynamique gauche 2 règles par niveau flèche-gif (1/3)
2 règles différentes par niveau
0 classe par niveau
Sources : http://www.cssplay.co.uk/menus/ - Référence : CSSplay - Experiment with Cascading Style Sheets
12. mvad-g-2r0c - Menu vertical arborescent
dynamique gauche 2 règles par niveau flèche-gif (2/3)
<div class="menu">
<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us</a></li>
<li class="sub"><a href="#nogo">Products</a>
<ul>
<li><a href="#nogo">Tripods</a></li>
<li class="sub"><a href="#nogo">Cameras</a>
<ul>
<li><a href="#nogo">Compact</a></li>
<li><a href="#nogo">SLR</a></li>
<li class="sub"><a href="#nogo">Digital</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li class="sub"><a href="#nogo">Nikon</a>
<ul>
<li><a href="#nogo">D200</a></li>
<li><a href="#nogo">D80</a></li>
<li><a href="#nogo">Coolpix</a></li>
<li><a href="#nogo">Lenses</a></li>
<li><a href="#nogo">Speedlight</a></li>
</ul>
</li>
…
0 classe par niveau
...
<li><a href="#nogo">Minolta</a></li>
<li><a href="#nogo">Pentax</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo">Films</a></li>
</ul>
</li>
<li><a href="#nogo">FAQs</a></li>
<li><a href="#nogo">Privacy</a></li>
<li><a href="#nogo">Contact us</a></li>
</ul>
</div>
.menu {height:150px; font-size:90%; margin:25px 0 50px 15px; /* this page only */}
.menu ul {position:relative; z-index:500; padding:0; margin:0; list-style-type:none; width:150px;}
.menu li {background:#d4d8bd url(shade.gif); height:26px; /* for IE7 */ float:left;}
.menu li.sub {background:#d4d8bd url(sub.gif) no-repeat right center;} /* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
.menu a, .menu a:visited {display:block; text-decoration:none; height:25px; line-height:25px; width:149px;
color:#000; text-indent:5px; border:1px solid #fff; border-width:0 1px 1px 1px;}
* html .menu a:hover {color:#efa; background:#aa7; position:relative;}
.menu li:hover {position:relative;}
.menu a:active, .menu a:focus {color:#efa; background:#aa7;}
.menu li:hover > a {color:#efa; background:#aa7;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {visibility:hidden; position:absolute; top:-30px; /* set up the overlap (minus the overrun) */
left:100px; /* set up the overrun area */ padding:30px;}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* for IE5.5 and IE6 you need to style each level hover */
/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul {visibility:hidden;}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul {visibility:hidden;}
/* keep the fifth level hidden when you hover on third level link */
.menu ul a:hover ul a:hover ul a:hover ul ul {visibility:hidden;}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {visibility:visible;}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul {visibility:visible;}
2 règles par niveau
/* make the fifth level visible when you hover over fourth level link */
0 classe par niveau
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}
(3/3)
13. mvad-g-mr0c - Menu vertical arborescent
dynamique gauche mêmes règles tous niveaux (1/3)
Mêmes règles tous niveaux
0 classe par niveau
Sources http://www.cssplay.co.uk/menus/cascade.html - Référence : CSSplay - Experiment with Cascading Style Sheets
<ul id="pmenu">
<li><a href="#nogo">Top Level 1</a></li>
<li><a href="#nogo">Top Level 2</a></li>
<li><a href="#nogo">Top Level 3 »</a>
<ul>
<li><a href="#nogo">Sub Level 1a</a></li>
<li><a href="#nogo">Sub Level 1b</a></li>
<li><a href="#nogo">Sub Level 1c »</a>
<ul>
<li><a href="#nogo">Sub Level 2a</a></li>
<li><a href="#nogo">Sub Level 2b »</a>
<ul>
<li><a href="#nogo">Sub Level 3a</a></li>
<li><a href="#nogo">Sub Level 3b »</a>
<ul>
<li><a href="#nogo">Sub Level 4a</a></li>
<li><a href="#nogo">Sub Level 4b</a></li>
<li><a href="#nogo">Sub Level 4c »</a>
<ul>
<li><a href="#nogo">Sub Level 5a</a></li>
<li><a href="#nogo">Sub Level 5b</a></li>
<li><a href="#nogo">Sub Level 5c</a></li>
<li><a href="#nogo">Sub Level 5d »</a>
<ul>
<li><a href="#nogo">Sub Level 6a</a></li>
<li><a href="#nogo">Sub Level 6b »</a>
<ul>
<li><a href="#nogo">Sub Level 7a</a></li>
<li><a href="#nogo">Sub Level 7b</a></li>
<li><a href="#nogo">Sub Level 7c</a></li>
<li><a href="#nogo">Sub Level 7d</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 6c</a></li>
<li><a href="#nogo">Sub Level 6d</a></li>
</ul>
...
0 classe par niveau
...
</li>
<li><a href="#nogo">Sub Level 5e</a></li>
<li><a href="#nogo">Sub Level 5f</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 4d</a></li>
<li><a href="#nogo">Sub Level 4e</a></li>
<li><a href="#nogo">Sub Level 4f</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 3c</a></li>
<li><a href="#nogo">Sub Level 3d</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 1d</a></li>
<li><a href="#nogo">Sub Level 1e</a></li>
</ul>
</li>
<li><a href="#nogo">Top Level 4</a></li>
<li><a href="#nogo">Top Level 5</a></li>
<li><a href="#nogo">Top Level 6</a>
<br>
</li>
</ul>
13. mvad-g-mr0c - Menu vertical arborescent
dynamique gauche mêmes règles tous niveaux (3/3)
#pmenu {padding:0; margin:25px 0 50px 15px; list-style-type: none; width:101px;}
#pmenu ul {padding:0; margin:0; list-style-type: none; width:101px;}
#pmenu li {position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000;
height:23px; line-height:22px; text-decoration:none; text-indent:5px;
background:#b2ab9b;; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;} #pmenu li:hover > ul {display:block; position:absolute; top:0;
left:101px;}
Mêmes règles tous niveaux
<ul id="pmenu">
0 classe par niveau
<li><a href="#nogo">Top Level 1</a></li>
<li><a href="#nogo">Top Level 2</a></li>
<li><a href="#nogo">Top Level 3 »</a>
<ul>
<li><a href="#nogo">Sub Level 1a</a></li>
<li><a href="#nogo">Sub Level 1b</a></li>
<li><a href="#nogo">Sub Level 1c »</a>
<ul>
<li><a href="#nogo">Sub Level 2a</a></li>
<li><a href="#nogo">Sub Level 2b »</a>
<ul>
<li><a href="#nogo">Sub Level 3a</a></li>
<li><a href="#nogo">Sub Level 3b »</a>
<ul>
<li><a href="#nogo">Sub Level 4a</a></li>
...
...
<li><a href="#nogo">Sub Level 4b</a></li>
<li><a href="#nogo">Sub Level 4c »</a>
<ul>
<li><a href="#nogo">Sub Level 5a</a></li>
<li><a href="#nogo">Sub Level 5b</a></li>
<li><a href="#nogo">Sub Level 5c</a></li>
<li><a href="#nogo">Sub Level 5d »</a>
<ul>
<li><a href="#nogo">Sub Level 6a</a></li>
<li><a href="#nogo">Sub Level 6b »</a>
<ul>
<li><a href="#nogo">Sub Level 7a</a></li>
<li><a href="#nogo">Sub Level 7b</a></li>
<li><a href="#nogo">Sub Level 7c</a></li>
<li><a href="#nogo">Sub Level 7d</a></li>
</ul>
</li>
14. mvad-d-mr0c - Menu vertical arborescent
dynamique droite mêmes règles tous niveaux (1/3)
Mêmes règles tous niveaux
0 classe par niveau
Sources http://www.howtocreate.co.uk/tutorials/testMenu.html
14. mvad-d-mr0c - Menu vertical arborescent
dynamique droite mêmes règles tous niveaux (2/3)
</li>
<ul class="makeMenu">
<li><a href="Lien2143.htm">France</a></li>
<li><a href= »Lien1.htm">&lt;&lt; Lips</a>
<li><a href="Lien2144.htm">Zoo de Vincenne<
<ul>
</ul>
<li><a href="Lien11.htm">Cat</a></li>
</li>
<li><a href="Lien12.htm">Rabbit</a></li>
<li><a href="Lien215.htm">Vietnam</a></li>
<li><a href="Lien13.htm">Dingo</a></li>
</ul>
</ul>
</li>
</li>
<li><a href="Lien22.htm">Monkey</a></li>
<li><a href= »Lien2.htm">&lt;&lt; Ears</a>
<li><a href="Lien23.htm">Dog</a></li>
<ul>
</ul>
<li><a href="Lien21.htm">&lt;&lt; Elephant</a>
</li>
<ul>
<li><a href="Lien3.htm">&lt;&lt; Eyes</a>
<li><a href="Lien211.htm">Indian</a></li>
<ul>
<li><a href="Lien212.htm">African</a></li>
<li><a href="Lien31.htm">Pig</a></li>
<li><a href=" Lien213.htm">Autralie</a></li>
<li><a href="Lien32.htm">Bird</a></li>
<li><a href="Lien214.htm">&lt;&lt; Cangourou</a>
<li><a href="Lien33.htm">Worm</a></li>
<ul>
</ul>
<li><a href=" Lien2141.htm">Allemagne</a></li>
</li>
<li><a href=" Lien2142.htm">&lt;&lt; Suisse</a>
<li><a href="Lien4.htm">&lt;&lt; Noses</a>
<ul>
<ul>
<li><a href="Lien21421.htm">Genève</a></li>
<li><a href="Lien41.htm">Bat</a></li>
<li><a href="Lien21422.htm">Lausanne</a></li>
<li><a href="Lien42.htm">Fish</a></li>
<li><a href="Lien21423.htm">Fribourg</a></li>
<li><a href="Lien43.htm">Panther</a></li>
<li><a href="Lien21424.htm">Fosse
</ul>
aux ours de Berne</a></li>
0 classe par niveau
</li>
</ul>
</ul>
14. mvad-d-mr0c - Menu vertical arborescent
dynamique droite mêmes règles tous niveaux (3/3)
ul.makeMenu * {line-height: normal ! important;}
ul.makeMenu, ul.makeMenu ul {margin: 0px; padding: 0px; width: 160px;
cursor: default;}
Mêmes règles tous niveaux
ul.makeMenu {float: right; margin-left: 1em;}
ul.makeMenu li {border: 1px solid #ff9900; margin: 0px 0px 2px; list-style-type: none;
position: relative; color: #ff9900; padding-top: 3px;
padding-bottom: 3px; background-color: #ffffdd;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
Bords arrondis
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;}
ul.makeMenu li > ul {display: none; position: absolute; top: -1px; left: -160px;}
ul.makeMenu li:hover {color: black; background-color: #99ff99;}
ul.makeMenu li:hover > ul {display: block;}
ul.makeMenu li a {display: block; width: 100%; text-decoration: none; color: #ff9900;}
ul.makeMenu li a:hover {color: black;}
ul.makeMenu ul {display: none; position: absolute; top: 2px; left: -160px;}
15.1. mvad-g-mr1c - Menu vertical arborescent
dynamique gauche mêmes règles tous niveaux (1/5)
1 classe identique par niveau : class="smenu"
Sources http://sarka-spip.net/production/spip.php?rubrique156
Référence : squelette SARKA pour SPIP 1.9.2
15.1. mvad-g-mr1c - Menu vertical arborescent
dynamique gauche mêmes règles tous niveaux (2/5)
<ul class="menulist">
<li class="smenu"> <a href="Lien-1.htm">1. Lien-1</a>
<ul>
<li><a href="Lien-1-1.htm">1.1. Lien-1-1</a></li>
<li><a href="Lien-1-2.htm">1.2. Lien-1-2</a></li>
1 classe identique
<li><a href="Lien-1-3.htm">1.3. Lien-1-3</a></li>
<li><a href="Lien-1-4.htm">1.4. Lien-1-4</a></li>
</ul>
</li>
<li><a href="Lien-2.htm">2. Lien-2</a> </li>
<li class="smenu"> <a href="Lien-3.htm">3. Lien-3</a>
<ul>
<li class="smenu"><a href="Lien-3-1.htm">3.1. Lien-3-1</a>
<ul>
<li class="smenu"> <a href="Lien-3-1-1.htm">3.1.1. Lien-3-1-1</a>
<ul>
<li><a href="Lien-3-1-1-1.htm">3.1.1.1. Lien-3-1-1-1</a></li>
<li><a href="Lien-3-1-1-2.htm">3.1.1.2. Lien-3-1-1-2</a></li>
<li><a href="Lien-3-1-1-3.htm">3.1.1.3. Lien-3-1-1-3</a></li>
<li><a href="Lien-3-1-1-4.htm">3.1.1.4. Lien-3-1-1-4</a></li>
<li><a href="Lien-3-1-1-5.htm">3.1.1.5. Lien-3-1-1-5</a></li>
<li><a href="Lien-3-1-1-6.htm">3.1.1.6. Lien-3-1-1-6</a></li>
<li><a href="Lien-3-1-1-7.htm">3.1.1.7. Lien-3-1-1-7</a></li>
</ul>
</li>
<li class="smenu"><a href="Lien-3-1-2.htm">3.1.2. Lien-3-1-2</a>
<ul>
<li><a href="Lien-3-1-2-1.htm">3.1.2.1. Lien-3-1-2-1</a></li>
<li><a href="Lien-3-1-2-2.htm">3.1.2.2. Lien-3-1-2-2</a></li>
<li><a href="Lien-3-1-2-3.htm">3.1.2.3. Lien-3-1-2-3</a></li>
</ul>
par niveau : class="smenu"
15.1. mvad-g-mr1c - Menu vertical arborescent
dynamique gauche mêmes règles tous niveaux (3/5)
</li>
<li><a href="Lien-3-1-3.htm">3.1.3. Lien-3-1-3</a></li>
<li><a href="Lien-3-1-4.htm">3.1.4. Lien-3-1-4</a></li>
<li class="smenu"> <a href="Lien-3-1-5.htm">3.1.5. Lien-3-1-5</a>
<ul>
<li><a href="Lien-3-1-5-1.htm">3.1.5.1. Lien-3-1-5-1</a></li>
<li><a href="Lien-3-1-5-2.htm">3.1.5.1. Lien-3-1-5-2</a></li>
</ul>
</li>
<li><a href="Lien-3-1-6.htm">3.1.6. Lien-3-1-6</a></li>
<li><a href="Lien-3-1-7.htm">3.1.7. Lien-3-1-7</a></li>
<li><a href="Lien-3-1-8.htm">3.1.8. Lien-3-1-8</a></li>
<li><a href="Lien-3-1-9.htm">3.1.9. Lien-3-1-9</a></li>
</ul>
</li>
1 classe identique par
<li><a href="Lien-3-2.htm">3.2. Lien-3-2</a></li>
<li><a href="Lien-3-3.htm">3.3. Lien-3-3</a></li>
<li class="smenu"> <a href="Lien-3-4.htm">3.4. Lien-3-4</a>
<ul>
<li><a href="Lien-3-4-1.htm">3.4.1. Lien-3-4-1</a></li>
<li><a href="Lien-3-4-2.htm">3.4.2. Lien-3-4-2</a></li>
<li class="smenu"> <a href="Lien-3-4-3.htm">3.4.3. Lien-3-4-3</a>
<ul>
<li><a href="Lien-3-4-3-1.htm">3.4.3.1. Lien-3-4-3-1</a></li>
<li class="smenu"> <a href="Lien-3-4-3-2.htm">3.4.3.2. Lien-3-4-3-2</a>
<ul>
<li><a href="Lien-3-4-3-2-1.htm">3.4.3.2.1. Lien-3-4-3-2-1</a></li>
</ul>
</li>
</ul>
</li>
niveau : class="smenu"
15.1. mvad-g-mr1c - Menu vertical arborescent
dynamique gauche mêmes règles tous niveaux (4/5)
<li><a href="Lien-3-4-5.htm">3.4.5. Lien-3-4-5</a></li>
<li><a href="Lien-3-4-6.htm">3.4.6. Lien-3-4-6</a></li>
</ul>
1 classe identique par niveau : class="smenu"
</li>
<li class="smenu"> <a href="Lien-3-5.htm">3.5. Lien-3-5</a>
<ul>
<li><a href="Lien-3-5-1.htm">3.5.1. Lien-3-5-1</a></li>
<li><a href="Lien-3-5-2.htm">3.5.2. Lien-3-5-2</a></li>
<li><a href="Lien-3-5-3.htm">3.5.3. Lien-3-5-3</a></li>
<li class="smenu"> <a href="Lien-3-5-4.htm">3.5.4. Lien-3-5-4</a>
<ul>
<li><a href="Lien-3-5-4-1.htm">3.5.4.1. Lien-3-5-4-1</a></li>
<li><a href="Lien-3-5-4-2.htm">3.5.4.2. Lien-3-5-4-2</a></li>
<li><a href="Lien-3-5-4-3.htm">3.5.4.3. Lien-3-5-4-3</a></li>
</ul>
</li>
<li class="smenu"> <a href="Lien-4.htm">4. Lien-4</a>
</ul>
<ul>
</li>
<li><a href="Lien-4-1.htm">4.1. Lien-4-1</a></li>
<li><a href="Lien-3-6.htm">3.6. Lien-3-6</a></li>
<li class="smenu"> <a href="Lien-4-2.htm">4.2. Lien-4-2</a>
<li><a href="Lien-3-7.htm">3.7. Lien-3-7</a></li>
<ul>
<li><a href="Lien-3-8.htm">3.8. Lien-3-8</a></li>
<li><a href="Lien-4-2-1.htm">4.2.1. Lien-4-2-1</a></li>
<li><a href="Lien-3-9.htm">3.9. Lien-3-9</a></li>
<li><a href="Lien-4-2-2.htm">4.2.2. Lien-4-2-2</a></li>
<li><a href="Lien-3-10.htm">3.10. Lien-3-10</a></li>
</ul>
<li><a href="Lien-3-11.htm">3.11. Lien-3-11</a></li>
</li>
<li><a href="Lien-3-12.htm">3.12. Lien-3-12</a></li>
<li><a href="Lien-4-3.htm">4.3. Lien-4-3</a></li>
<li><a href="Lien-3-13.htm">3.13. Lien-3-13</a></li>
</ul>
</ul>
</li>
</li>
<li><a href="Lien-5.htm">5. Lien-5</a></li>
</ul>
15.1. mvad-g-mr1c - Menu vertical arborescent
dynamique gauche mêmes règles tous niveaux (5/5)
#nav1 {padding: 0px; width: 100%; font-family: Arial,Helvetica,sans-serif; font-size: 12px;}
ul.menulist li ul {display: none;}
ul.menulist li:hover > ul {display: block;}
ul.menulist, ul.menulist ul {border-style: solid solid none;
border-color: #ffffff #ffffff -moz-use-text-color; border-width: 1px 1px 0px;
margin: 0px; padding: 0px; background: #a0a0a0 none repeat scroll 0% 50%;
list-style-type: none; list-style-image: none; list-style-position: outside; width: 180px;}
ul.menulist ul {position: absolute; top: -1px; left: 180px;}
ul.menulist li {border-bottom: 1px solid #ffffff; margin: 0px; padding: 0px; position: relative;}
ul.menulist a {padding: 5px; display: block; color: #ffffff; text-decoration: none;}
ul.menulist a:visited {background: #a0a0a0 none repeat scroll 0%; color: #ff0000;}
ul.menulist li.smenu > a:visited {background-image: url(images/arrow.gif) ! important;
background-position: 171px 50%; background-repeat: no-repeat;}
ul.menulist a:hover { background: #00ff00 none repeat scroll 0% 50%; color: #000000;}
ul.menulist li.smenu {background-image: url(images/arrow.gif) ! important;
background-position: 171px 50%; background-repeat: no-repeat;}
ul.menulist li.smenu:hover, ul.menulist li.smenu > a:hover {
background-image: url(images/arrowb.gif) ! important; background-position: 168px 50%;
background-repeat: no-repeat; background-color: #666666;}
15.2. mvad-d-mr1c - Menu vertical arborescent
dynamique droite mêmes règles tous niveaux (1/2)
1 classe identique par niveau : class="smenu"
Sources http://sarka-spip.net/production/spip.php?rubrique156
Référence : squelette SARKA pour SPIP 1.9.2
15.2. mvad-d-mr1c - Menu vertical arborescent
dynamique droite mêmes règles tous niveaux (2/2)
#nav1 {padding: 0px; width: 100%; font-family: Arial,Helvetica,sans-serif; font-size: 12px;}
ul.menulist {float: right;}
ul.menulist li ul {display: none;}
ul.menulist li:hover > ul {display: block;}
ul.menulist, ul.menulist ul {border-style: solid solid none;
border-color: #ffffff #ffffff -moz-use-text-color; border-width: 1px 1px 0px;
margin: 0px; padding: 0px; background: #a0a0a0 none repeat scroll 0% 50%;
list-style-type: none; list-style-image: none; list-style-position: outside; width: 180px;}
ul.menulist ul {position: absolute; top: -1px; left: -182px;}
ul.menulist li {border-bottom: 1px solid #ffffff; margin: 0px; padding: 0px; position: relative;}
ul.menulist a {padding: 5px; display: block; color: #ffffff; text-decoration: none;}
ul.menulist a:visited {background: #a0a0a0 none repeat scroll 0%; color: #ff0000;}
ul.menulist li.smenu > a:visited {background-image: url(images/arrow.gif) ! important;
background-position: 171px 50%; background-repeat: no-repeat;}
ul.menulist a:hover { background: #00ff00 none repeat scroll 0% 50%; color: #000000;}
ul.menulist li.smenu {background-image: url(images/arrow.gif) ! important;
background-position: 171px 50%; background-repeat: no-repeat;}
ul.menulist li.smenu:hover, ul.menulist li.smenu > a:hover {
background-image: url(images/arrowb.gif) ! important; background-position: 168px 50%;
background-repeat: no-repeat; background-color: #666666;}
16. mhad-2niv - Menu horizontal arborescent
dynamique 2 niveaux (1/3)
Sources http://www.cssplay.co.uk/menus/drop_line.html - Référence : Copyright (c) 2005-2007 Stu Nicholls. All rights reserved
16. mhad-2niv - (2/3)
<div class="menu">
<ul>
<li><a href="#nogo" title="John Constable"><em class="lft"></em><b>John Constable</b><em class="rgt"></em></a>
<ul>
<li><a href="#nogo" title="The Hay Wain">The Hay Wain</a></li>
<li><a href="#nogo" title="Brighton Beach">Brighton Beach</a></li>
<li><a href="#nogo" title="Malvern Hall">Malvern Hall</a></li>
<li><a href="#nogo" title="Salisbury Cathedral">Salisbury Cathedral</a></li>
<li><a href="#nogo" title="Weymouth Bay">Weymouth Bay</a></li>
</ul>
</li>
<li><a href="#nogo" title="William Turner"><em class="lft"></em><b>William Turner</b><em class="rgt"></em></a>
<ul>
<li><a href="#nogo" title="Fishermen at Sea">Fishermen at Sea</a></li>
<li><a href="#nogo" title="The Shipwreck">The Shipwreck</a></li>
<li><a href="#nogo" title="The Vale of Ashburnham">The Vale of Ashburnham</a></li>
<li><a href="#nogo" title="Crossing the Brook">Crossing the Brook</a></li>
</ul>
</li>
<li><a href="#nogo" title="Henri Matisse"><em class="lft"></em><b>Henri Matisse</b><em class="rgt"></em></a>
<ul>
<li><a href="#nogo" title="The Girl with Green Eyes">The Girl with Green Eyes</a></li>
<li><a href="#nogo" title="The Dream">The Dream</a></li>
<li><a href="#nogo" title="Woman in Blue">Woman in Blue</a></li>
<li><a href="#nogo" title="The Yellow Dress">The Yellow Dress</a></li>
</ul>
</li>
<li><a href="#nogo" title="Paul Cezanne"><em class="lft"></em><b>Paul Cezanne</b><em class="rgt"></em></a>
<ul>
<li><a href="#nogo" title="The Large Bathers">The Large Bathers</a></li>
<li><a href="#nogo" title="Onions and Bottles">Onions and Bottles</a></li>
<li><a href="#nogo" title="Mardi Gras">Mardi Gras</a></li>
<li><a href="#nogo" title="Still Life">Still Life</a></li>
<li><a href="#nogo" title="Boy in a Red Waistcoat">Boy in a Red Waistcoat</a></li>
</ul>
</li></ul></div>
16. mhad-2niv - (3/3)
.menu {position:relative; width:750px; height:2em; background:#b7c6ac; border-top:10px solid #b7c6ac;
padding-bottom:1px; background:#b7c6ac url(drop/line.gif) bottom left repeat-x; margin-bottom:5em;}
* html .menu {padding-bottom:0;}
.menu ul {list-style-type:none; padding:0; margin:0 0 0 20px; width:730px; height:100%;}
.menu li {float:left;}
.menu table {position:absolute; border-collapse:collapse; left:0; top:0;}
.menu a, .menu :visited {color:#fff; text-decoration:none;}
.menu a em.lft, .menu :visited em.lft {display:block; float:left; width:5px; height:2em;
background: transparent url(drop/lefta.gif); border-bottom:1px solid #777;}
.menu a b, .menu :visited b {display:block; font-weight:normal; float:left; padding:0 10px;
height:2em;line-height:1.9em; background: transparent url(drop/mida.gif);
cursor:pointer; border-bottom:1px solid #777;}
.menu a em.rgt, .menu :visited em.rgt {display:block; float:left; width:5px; height:2em;
background: transparent url(drop/righta.gif); border-bottom:1px solid #777;}
.menu ul ul {visibility:hidden; position:absolute; height:2em; top:2em; left:-20px; width:749px;
border-bottom:1px solid #777; border-right:1px solid #777; background:#ccc;}
.menu :hover {white-space:normal;}
.menu a:hover b {color:#000; background: transparent url(drop/midb.gif); border-bottom-color:#ccc;}
.menu a:hover em.lft {background: transparent url(drop/leftb.gif); border-bottom-color:#ccc;}
.menu a:hover em.rgt {background: transparent url(drop/rightb.gif); border-bottom-color:#ccc;}
.menu li:hover > a b {color:#000; background: transparent url(drop/midb.gif); border-bottom-color:#ccc;}
.menu li:hover > a em.lft {background: transparent url(drop/leftb.gif); border-bottom-color:#ccc;}
.menu li:hover > a em.rgt {background: transparent url(drop/rightb.gif); border-bottom-color:#ccc;}
.menu ul li:hover ul, .menu ul a:hover ul {display:block; visibility:visible; top:2em; margin-top:1px;}
.menu ul :hover ul li {display:block; border-left:1px solid #777; background:#ccc; height:2em;}
.menu ul :hover ul li a {display:block; font-size:0.8em; height:2em; line-height:2.5em; width:auto;
float:left; color:#444; padding:0 10px;}
.menu ul :hover ul li a:hover {color:#c00;}
17. mhvad-g-2r2c - Menu horizontal vertical arborescent
dynamique gauche 2 règles 2 classes par niveau (1/3)
1 classe identique par niveau : class="submenu"
1 classe différente par niveau : class="level1" pour le menu de niveau 1
class="level2" pour le menu de niveau 2
class="level3" pour le menu de niveau 3
Même code HTML que pour
class="level4" pour le menu de niveau 4
9. mvad-g-1r2c
class="level5" pour le menu de niveau 5
...
Sources : http://more.ericmeyeroncss.com/dloads/ - Référence : More Eric Meyer on CSS.
17. mhvad-g-2r2c
(2/3)
<div id="nav">
<ul class="level1">
<li><a href="/">Home</a></li>
<li class="submenu"><a href="/services/">Services</a>
<ul class="level2">
<li><a href="/services/strategy/">Strategy</a></li>
<li><a href="/services/optimize/">Optimization</a></li>
<li><a href="/services/guidance/">Guidance</a></li>
Même code HTML que pour
<li><a href="/services/training/">Training</a></li>
</ul>
</li>
<li><a href="/events/">Events</a></li>
<li class="submenu"><a href="/pubs/">Publications</a>
<ul class="level2">
<li><a href="/pubs/articles/">Articles</a></li>
<li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
<ul class="level3">
...
</li>
<li><a href="/pubs/tuts/html/">HTML</a></li>
<li><a href="/pubs/tuts/svg/">SVG</a><
<li class="submenu"><a href="/pubs/tuts/css/">CSS</a>
<li><a href="/pubs/tuts/xml/">XML</a><
<ul class="level4">
</ul>
</li>
<li><a href="/pubs/tuts/html/">Genève</a></li>
<li><a href="/pubs/wpapers/">White Pape
<li><a href="/pubs/tuts/css/">Lausanne</a></li>
<li><a href="/pubs/comment/">Commenta
<li><a href="/pubs/tuts/svg/">Fribourg</a></li>
</ul>
</li>
<li><a href="/pubs/tuts/xml/">Berne</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</ul>
...
</div>
9. mvad-g-1r2c
17. mhvad-g-2r2c - Menu horizontal vertical arborescent
dynamique gauche 2 règles 2 classes par niveau (3/3)
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
#main {color: #CCC; margin-left: 7em; padding: 2em 0 1px 5%; border-left: 1px solid;}
div#nav {float: left; margin: -1px 0 0 7em; background: #FFF; border: 1px solid #AAA;}
div#nav ul {margin: 0; padding: 0; background: white; border: 1px solid #CCC; border-width: 0 1px;}
div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7em; line-height: 1em;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; width: 7em; display: none;}
div#nav ul ul li {border-bottom: 1px solid #CCC;}
div#nav li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu li.submenu:hover {background-color: #EDD;}
div#nav li.submenu li.submenu:hover {background-color: #EDD;}
div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3, div#nav
ul.level2 li.submenu ul.level3 li.submenu:hover ul.level4 {display:block;}
div#nav ul.level2 {top: 1.5em; left: -1px;}
div#nav ul.level3 {top: -1px; left: 7em; border-top: 1px solid #CCC;}
div#nav ul.level4 {top: -1px; left: 7em; border-top: 1px solid #CCC;}
18. mhvad-mr0c- Menu horizontal vertical arborescent
dynamique gauche mêmes règles tous niveaux (1/3)
Mêmes règles tous niveaux
0 classe par niveau
Sources : http://www.cssplay.co.uk/menus/pro_drop2 - Référence : CSSplay - Experiment with Cascading Style Sheets
<ul id="pmenu">
<li><a href="#nogo">Top Level 1</a></li>
<li><a href="#nogo">Top Level 2</a></li>
<li><a href="#nogo">Top Level 3 »</a>
<ul>
<li><a href="#nogo">Sub Level 1a</a></li>
<li><a href="#nogo">Sub Level 1b</a></li>
<li><a href="#nogo">Sub Level 1c »</a>
0 classe par niveau
<ul>
<li><a href="#nogo">Sub Level 2a</a></li>
...
<li><a href="#nogo">Sub Level 2b »</a>
</li>
<ul>
<li><a href="#nogo">Sub Level 5e</a></li>
<li><a href="#nogo">Sub Level 3a</a></li>
<li><a href="#nogo">Sub Level 5f</a></li>
<li><a href="#nogo">Sub Level 3b »</a>
</ul>
<ul>
</li>
<li><a href="#nogo">Sub Level 4a</a></li>
<li><a href="#nogo">Sub Level 4d</a></li>
<li><a href="#nogo">Sub Level 4b</a></li>
<li><a href="#nogo">Sub Level 4e</a></li>
<li><a href="#nogo">Sub Level 4c »</a>
<li><a href="#nogo">Sub Level 4f</a></li>
<ul>
</ul>
<li><a href="#nogo">Sub Level 5a</a></li>
</li>
<li><a href="#nogo">Sub Level 5b</a></li>
<li><a href="#nogo">Sub Level 3c</a></li>
<li><a href="#nogo">Sub Level 5c</a></li>
<li><a href="#nogo">Sub Level 3d</a></li>
<li><a href="#nogo">Sub Level 5d »</a>
</ul>
<ul>
</li>
<li><a href="#nogo">Sub Level 6a</a></li>
<li><a href="#nogo">Sub Level 2c</a></li>
<li><a href="#nogo">Sub Level 6b »</a>
</ul>
<ul>
</li>
<li><a href="#nogo">Sub Level 7a</a></li>
<li><a href="#nogo">Sub Level 1d</a></li>
<li><a href="#nogo">Sub Level 7b</a></li>
<li><a href="#nogo">Sub Level 1e</a></li>
<li><a href="#nogo">Sub Level 7c</a></li>
</ul>
<li><a href="#nogo">Sub Level 7d</a></li>
</li>
</ul>
<li><a href="#nogo">Top Level 4</a></li>
</li>
<li><a href="#nogo">Top Level 5</a></li>
<li><a href="#nogo">Sub Level 6c</a></li>
<li><a href="#nogo">Top Level 6</a>
<li><a href="#nogo">Sub Level 6d</a></li>
<br>
</ul>
</li>
...
</ul>
18. mhvad-mr0c- Menu horizontal vertical arborescent
dynamique gauche mêmes règles tous niveaux (3/3)
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;} Mêmes règles tous niveaux
#pmenu {margin:25px 0 200px 15px;}
0 classe par niveau
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000;
height:23px; line-height:22px; text-decoration:none; text-indent:5px;
background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}
<ul id="pmenu">
<li><a href="#nogo">Top Level 1</a></li>
<li><a href="#nogo">Top Level 2</a></li>
<li><a href="#nogo">Top Level 3 »</a>
<ul>
<li><a href="#nogo">Sub Level 1a</a></li>
<li><a href="#nogo">Sub Level 1b</a></li>
<li><a href="#nogo">Sub Level 1c »</a>
<ul>
<li><a href="#nogo">Sub Level 2a</a></li>
<li><a href="#nogo">Sub Level 2b »</a>
<ul>
<li><a href="#nogo">Sub Level 3a</a></li>
<li><a href="#nogo">Sub Level 3b »</a>
<ul>
<li><a href="#nogo">Sub Level 4a</a></li>
...
...
<li><a href="#nogo">Sub Level 4b</a></li>
<li><a href="#nogo">Sub Level 4c »</a>
<ul>
<li><a href="#nogo">Sub Level 5a</a></li>
<li><a href="#nogo">Sub Level 5b</a></li>
<li><a href="#nogo">Sub Level 5c</a></li>
<li><a href="#nogo">Sub Level 5d »</a>
<ul>
<li><a href="#nogo">Sub Level 6a</a></li>
<li><a href="#nogo">Sub Level 6b »</a>
<ul>
<li><a href="#nogo">Sub Level 7a</a></li>
<li><a href="#nogo">Sub Level 7b</a></li>
<li><a href="#nogo">Sub Level 7c</a></li>
<li><a href="#nogo">Sub Level 7d</a></li>
</ul>
</li>
19. mhvad-nrnc- Menu horizontal vertical arborescent
dynamique professionnel n1 règles n2 class par niveaux (1/6)
5 id différents, un par rubrique principale
6 fois class top, une par rubrique principale
6 fois class top_link, une par rubrique principale
4 fois class down, une par sous-menu de 2e niveau
8 fois class fly, une fois par sous-menu
n1 règles par niveau
Sources : http://www.cssplay.co.uk/menus/pro_drop2 - Référence : CSSplay - Experiment with Cascading Style Sheets
<ul class="menu2">
<li class="top"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span class="down">Products</span></a>
<ul class="sub">
<li><a href="../menu/" class="fly">Cameras </a>
<ul>
<li><a href="../mozilla/">Nikon</a></li>
<li><a href="../ie/">Minolta</a></li>
<li><a href="../opacity/">Pentax</a></li>
</ul>
</li>
<li class="mid"><a href="../boxes/" class="fly">Lenses </a>
<ul>
<li><a href="../mozilla/">Wide Angle</a></li>
<li><a href="../ie/">Standard</a></li>
<li><a href="../opacity/">Telephoto</a></li>
<li><a href="../menu/" class="fly">Zoom</a>
<ul>
<li><a href="../mozilla/">35mm to 125mm</a></li>
<li><a href="../opacity/">50mm to 250mm</a></li>
<li><a href="../menu/">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="../boxes/">Mirror</a></li>
<li><a href="../opacity/" class="fly">Non standard </a>
<ul>
<li><a href="../mozilla/">Bayonet mount</a></li>
<li><a href="../opacity/">Screw mount</a></li>
</ul>
</li>
5 id différents, un par rubrique principale
</ul>
6 fois class top, une par rubrique principale
</li>
6 fois class top_link, une par rubrique principale
<li><a href="../mozilla/">Flash Guns</a></li>
<li><a href="../ie/">Tripods</a></li>
4 fois class down, une par sous-menu de 2e niveau
<li><a href="../opacity/">Filters</a></li>
8 fois class fly, une fois par sous-menu
</ul>
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="../menu/">Printing</a></li>
<li><a href="../layouts/">Photo Framing</a></li>
<li><a href="../boxes/">Retouching</a></li>
<li><a href="../mozilla/">Archiving</a></li>
</ul>
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span class="down">Contacts</span>
</a>
<ul class="sub">
<li><a href="../layouts/">Support</a></li>
<li><a href="../boxes/" class="fly">Sales</a>
<ul>
<li><a href="../mozilla/">USA</a></li>
<li><a href="../ie/">Canadian</a></li>
<li><a href="../opacity/">South American</a></li>
<li><a href="../menu/" class="fly">European</a>
<ul>
<li><a href="../mozilla/" class="fly">British&gt; </a>
<ul>
<li><a href="../ie/">London</a></li>
<li><a href="../menu/">Liverpool</a></li>
<li><a href="../boxes/">Glasgow</a></li>
<li><a href="../opacity/" class="fly">Bristol</a>
<ul>
<li><a href="../ie/">Redland</a></li>
<li><a href="../opacity/">Hanham</a></li> 5 id différents, un par rubrique principale
<li><a href="../menu/">Eastville</a></li>
6 fois class top, une par rubrique principale
</ul>
6 fois class top_link, une par rubrique principale
</li>
<li><a href="../layouts/">Cardiff</a></li>
4 fois class down, une par sous-menu de 2e niveau
<li><a href="../mozilla/">Belfast</a></li>
8 fois class fly, une fois par sous-menu
</ul>
19. mhvad-nrnc- Menu horizontal vertical arborescent
dynamique professionnel n1 règles n2 class par niveaux (4/6)
</li>
<li><a href="../opacity/">French</a></li>
<li><a href="../menu/">German</a></li>
<li><a href="../boxes/">Spanish</a></li>
</ul>
</li>
5 id différents, un par rubrique principale
<li><a href="../boxes/">Australian</a></li>
6 fois class top, une par rubrique principale
<li><a href="../boxes/">Asian</a></li>
6 fois class top_link, une par rubrique principale
</ul>
</li>
4 fois class down, une par sous-menu de 2e niveau
<li><a href="../mozilla/">Buying</a></li>
8 fois class fly, une fois par sous-menu
<li><a href="../ie/">Photographers</a></li>
<li><a href="../opacity/">Stockist</a></li>
<li><a href="../menu/">General</a></li>
</ul>
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="../ie/">Online</a></li>
<li><a href="../opacity/">Catalogue</a></li>
<li><a href="../menu/">Mail Order</a></li>
</ul>
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
19. mhvad-nrnc- Menu horizontal vertical arborescent
dynamique professionnel n1 règles n2 class par niveaux (5/6)
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(prodrop2/button4.gif);}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px;
background:#fff url(prodrop2/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none;
font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px;
background:url(prodrop2/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}
.menu2 li:hover > a.top_link {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}
19. mhvad-nrnc- Menu horizontal vertical arborescent
dynamique professionnel n1 règles n2 class par niveaux (6/6)
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0;
height:0; margin:0; padding:0; list-style:none;}
.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab;
white-space:nowrap; width:93px; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px;
color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap;
width:93px; z-index:200; height:auto;}
20. mhvad-mr0c- Menu horizontal vertical arborescent
dynamique 0 classe mêmes règles tous niveaux (1/4)
Mêmes règles tous niveaux
0 classe par niveau
Utilise javascript
Sources http://dosimple.ch/articles/Menus-dynamiques/menuHorizontal.html - Référence : doSimple : http://dosimple.ch/articles/Menus-dynamiques/
20. mhvad-mr0c
Utilise javascript
(2/4)
<ul id="menu">
Mêmes règles tous niveaux
</li>
<li><a href="#menu1">menu 1</a>
0 classe par niveau
</ul>
<ul>
Même code HTML que
</li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a>
21. mvad-mr0c
<li><a href="#">élément 3</a>
<ul>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a>
<li><a href="#">élément 3</a></li>
<ul>
</ul>
<li><a href="#">élément 1</a></li>
</li>
<li><a href="#">élément 2</a>
</ul>
<ul>
</li>
<li><a href="#">Genève</a></li>
<li><a href="#menu2">menu 2</a>
<li><a href="#">Lausanne</a>
<ul>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">St-Gall</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">Bâle</a></li>
<li><a href="#">élément 3</a></li>
<li><a href="#">Lucerne</a></li>
</ul>
<li><a href="#">Zurich</a></li>
</li>
</ul>
<li><a href="#menu3">menu 3</a>
</li>
<ul>
<li><a href="#">Fribourg</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">Berne</a></li>
<li><a href="#">élément 2</a></li>
</ul>
<li><a href="#">élément 3</a></li>
</li>
</ul>
<li><a href="#">élément 3</a></li>
</li>
<li><a href="#">élément 4</a></li>
</ul>
</ul>
20. mhvad-mr0c- Menu horizontal vertical arborescent
dynamique 0 classe mêmes règles tous niveaux (3/4)
<script type="text/javascript" src="dynMenu.js"></script>
<script type="text/javascript" src="browserdetect.js"></script>
<style type="text/css">
@import "menu.css";
</style><!-- script du menu --><!-- détéction du navigateur --><!-- important pour
que les vieux navigateurs ne comprennent pas le CSS -->
Mêmes règles tous niveaux
0 classe par niveau
Utilise javascript
20. mhvad-mr0c- Menu horizontal vertical arborescent
dynamique 0 classe mêmes règles tous niveaux (4/4)
Fichier importé : menu.css
/* CSS du menu horizontal, bieler batiste */
Mêmes règles tous niveaux
Utilise javascript
.menu {position:absolute; display:block; margin:0; padding:0; width:500px;}
.menu ul {position:absolute; display:block; width:124px; /*margin:0;*/ padding:0;}
.menu li ul {visibility:hidden;}
.menu li li ul {position:absolute; margin-left:124px; margin-top:-23px;}
.menu li {list-style:none; width:124px; height:auto; display:inline;
display/**/:block; float:none; float/**/:left; margin:0; padding:0;}
.menu li li {display:block; float:none;}
* html .menu li li { display:inline;} /* correct a little IE bug */
.menu a {text-align:center; background-color: #9cf; border:1px #666 solid; color:#000;
display:block; width:120px; text-decoration:none; padding:2px 0; margin:1px;}
.menu a:hover {background-color: #eee; border:1px #aaa solid;}
.menu a:focus {background-color: #aaf;} /* for a mozilla better display with key nav */
a.linkOver {background-color: #eee;}
21. mvad-mr0c- Menu vertical arborescent dynamique
0 classe mêmes règles tous niveaux (1/4)
Mêmes règles tous niveaux
0 classe par niveau
Utilise javascript
Sources http://dosimple.ch/articles/Menus-dynamiques/menuVertical.html - Référence : doSimple : http://dosimple.ch/articles/Menus-dynamiques/
21. mhvad-mr0c
Utilise javascript
(2/4)
<ul id="menu">
Mêmes règles tous niveaux
</li>
<li><a href="#menu1">menu 1</a>
0 classe par niveau
</ul>
<ul>
Même code HTML que
</li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a>
20. mhvad-mr0c
<li><a href="#">élément 3</a>
<ul>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a>
<li><a href="#">élément 3</a></li>
<ul>
</ul>
<li><a href="#">élément 1</a></li>
</li>
<li><a href="#">élément 2</a>
</ul>
<ul>
</li>
<li><a href="#">Genève</a></li>
<li><a href="#menu2">menu 2</a>
<li><a href="#">Lausanne</a>
<ul>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">St-Gall</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">Bâle</a></li>
<li><a href="#">élément 3</a></li>
<li><a href="#">Lucerne</a></li>
</ul>
<li><a href="#">Zurich</a></li>
</li>
</ul>
<li><a href="#menu3">menu 3</a>
</li>
<ul>
<li><a href="#">Fribourg</a></li>
<li><a href="#">élément 1</a></li>
<li><a href="#">Berne</a></li>
<li><a href="#">élément 2</a></li>
</ul>
<li><a href="#">élément 3</a></li>
</li>
</ul>
<li><a href="#">élément 3</a></li>
</li>
<li><a href="#">élément 4</a></li>
</ul>
</ul>
21. mhvad-mr0c- Menu horizontal vertical arborescent
dynamique 0 classe mêmes règles tous niveaux (3/4)
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script><!-- détéction du
navigateur -->
<script type="text/javascript" src="browserdetect.js"></script><!-- important pour
que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
@import "menuv.css";
</style>
Mêmes règles tous niveaux
0 classe par niveau
Utilise javascript
21. mhvad-mr0c
Fichier importé : menu.css
Utilise javascript
(4/4)
Mêmes règles tous niveaux
Utilise javascript
/* CSS du menu vertical, bieler batiste */
body {margin-left:15em;}
.menu {position:absolute; /* solve a Opera7/IE display bug */ width:152px;
width/**/:150px; border-top: 1px #000 solid; border-left: 1px #000 solid;
border-right: 1px #000 solid; margin:0; padding:0;}
.menu span {display:none;}
.menu ul {border-top: 1px #000 solid; border-left: 1px #000 solid;
border-right: 1px #000 solid; margin:0; padding:0; position:absolute;
/* important */ width:152px; width/**/:150px;}
.menu li ul {visibility:hidden;}
.menu li ul {margin-left:150px; /* be careful */ margin-top:-24px;}
.menu a {text-align:center; background-color: #ff9; color:#000; text-weight:bold;
display:block; width:150px; border-bottom: 1px #000 solid; text-decoration:none;
margin:0; padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */}
.menu a:hover {background-color: #aaf;}
.menu a:focus {background-color: #aaf;} /* for a mozilla better display with key nav */
.menu span { /* hide some accessibility stuff */ display:none;}
.menu li {width:150px; display:block; float:left; list-style:none; margin:0; padding:0;}
* html .menu li {display:inline; /* solve a IE PC list bug */ float:none;
/* solve a IE5 clav nav bug */} /* IE PC selector */
a.linkOver {background-color: #eee;}
22. mvac-mr0c- Menu vertical arborescent contextuel
0 classe mêmes règles tous niveaux (1/4)
Mêmes règles tous niveaux, 0 classe par niveau
utilise javascript
<div class="menu rubriques" id="navigation">
22. mvac-mr0c (2/4)
<ul class="pde">
<li><a href="#">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a>
<ul>
</li>
<li><a href="#">Sous sous-rubrique 3.1.2.4</a></li>
<li><a href="#">Sous-rubrique 2.1</a></li>
</ul>
<li><a href="#">Sous-rubrique 2.2</a></li>
</li>
<li><a href="#">Sous-rubrique 2.3</a></li>
<li><a href="#">Sous sous-rubrique 3.1.3</a></li>
<li><a href="#">Sous sous-rubrique 3.1.4</a></li>
<li><a href="#">Sous-rubrique 2.4</a></li>
</ul>
</ul>
</li>
</li>
</ul>
</li>
<li><a href="#">Rubrique 3</a>
<li><a href="#">Rubrique 4</a>
<ul>
</li>
<li><a href="#">Sous-rubrique 3.1</a>
</ul>
<ul>
<li><a href="#">Sous sous-rubrique 3.1.1</a></li>
<li><a href="#">Sous sous-rubrique 3.1.2</a>
Mêmes règles tous niveaux
<ul>
0 classe par niveau
<li><a href="#">Sous sous-rubrique 3.1.2.1</a></li>
utilise javascript
<li><a href="#">Sous sous-rubrique 3.1.2.2</a></li>
<li><a href="#">Sous sous-rubrique 3.1.2.3</a>
<ul>
<li><a href="#">Sous sous-rubrique 3.1.2.3.1</a></li>
<li><a href="#">Sous sous-rubrique 3.1.2.3.2</a></li>
<li><a href="#">Sous sous-rubrique 3.1.2.3.3</a></li>
<li><a href="#">Sous sous-rubrique 3.1.2.3.4</a></li>
</ul>
22. mvac-mr0c- Menu vertical arborescent contextuel
0 classe mêmes règles tous niveaux (3/4)
html {font-size : 100%;}
body {background : #fff; margin : 0; padding : 0; font-size : 0.8125em;
font-family : sans-serif;}
#navigation {float : right; width : 30%; margin-top : 2em; overflow : hidden;}
.menu ul {margin : 0; padding : 0; list-style : none;}
.menu ul li {margin : 0.2em 0; padding : 0.2em;}
.menu ul li ul {margin-left : 1em; border : 0;}
ul.pde ul {margin : 0 0 0 1em; padding : 0;}
ul.pde li {line-height : 1.3em; padding : 0.2em 0; margin : 0; padding-left : 15px;}
ul.pde li.parent {padding-left : 0;}
ul.pde li.parent img {border : none; padding-right : 5px;}
ul.pde li.current li {padding-left : 0;}
.hide {position : absolute; top : 0; left : -4000px;}
.show {position : static; display : table; top : 0; left : 1em;}
a {color : #090; text-decoration : none;}
a:focus, a:hover, a:active {color : #c00; text-decoration : none;}
.on {font-weight : bold; ;}
Mêmes règles tous niveaux, 0 classe par niveau, utilise javascript