Bonjour tous,
D'abord un grand merci a tous ceux qui font vivre ce site qui est une sacré réference en CSS /XHTML !
Je viens faire une remarque sur le tuto du menu déroulant horizontal et vertical. Les concepteurs utilisent des balises DT DL et DD pour structurer leur code mais celles-ci ne sont pas indiqués pour la conception de menu déroulant (balises de descriptions)...
Je viens vous proposer une alternative utlisant des div et surtout (ce qui me semble important pour un menu respectant les principes WAI) des balises de titre h2.
Merci de me dire ce que vous en pensez (oui, non, kif kif?
)
-Les styles de couleurs et qq elements de mise en forme changent avec des .class (2 CSS forme + style)
- y'a des commentaires pour voir les balises remplacées.
-Les DD ont carrement étaient supprimées: pour moi ca servait vraiment à rien
Bonne continuation alsa!
Le HTML
Le CSS de mise en page
CSS de styles
Modifié par alx75 (30 Nov 2006 - 02:53)
D'abord un grand merci a tous ceux qui font vivre ce site qui est une sacré réference en CSS /XHTML !
Je viens faire une remarque sur le tuto du menu déroulant horizontal et vertical. Les concepteurs utilisent des balises DT DL et DD pour structurer leur code mais celles-ci ne sont pas indiqués pour la conception de menu déroulant (balises de descriptions)...
Je viens vous proposer une alternative utlisant des div et surtout (ce qui me semble important pour un menu respectant les principes WAI) des balises de titre h2.
Merci de me dire ce que vous en pensez (oui, non, kif kif?
)-Les styles de couleurs et qq elements de mise en forme changent avec des .class (2 CSS forme + style)
- y'a des commentaires pour voir les balises remplacées.
-Les DD ont carrement étaient supprimées: pour moi ca servait vraiment à rien
Bonne continuation alsa!
Le HTML
a écrit :
<div id="navigation">
<div class="sous_navigation">
<h2 class="menu1" onmouseover="javascript:montre('smenu1');"><a href="index.php?page=menu1">Menu 1</a></h2>
<ul id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<li><a href="#">Sous-Menu 1.1</a></li>
</ul>
</div>
<div class="sous_navigation">
<h2 class="menu2" onmouseover="javascript:montre('smenu2');"><a href="index.php?page=menu2">Menu 2</a></h2>
<ul id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</div>
<div class="sous_navigation">
<h2 class="menu3" onmouseover="javascript:montre('smenu3');"><a href="index.php?page=menu3">Menu 3</a></h2>
<ul id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');" >
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
</ul>
</div>
<div class="sous_navigation">
<h2 class="menu4" onmouseover="javascript:montre('smenu4');"><a href="index.php?page=menu4">Menu 4</a></h2>
<ul id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</div>
</div>
Le CSS de mise en page
a écrit :
h2, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation { /* equivalent de #menu */
position: relative;
top: 0;
left: 0;
z-index:100;
width: 750px;
}
.sous_navigation { /*dl*/
float: left;
width: 83px;
}
#navigation h2 { /* dt */
cursor: pointer;
text-align: center;
font-weight: bold;
border: 1px solid gray;
margin: 1px;
font-size:80%;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #menu9 {
/* dd */
display: none;
border: 1px solid gray;
/*li*/
text-align: left;
padding:0 5px;
background: #fff;
width:150px;
position:absolute;}
#navigation li a, #navigation h2 a {
color:#FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#navigation li a:hover, #navigation li a:focus, #navigation h2 a:hover, #navigation h2 a:focus {
background-color: #000000;
}
CSS de styles
a écrit :
#smenu1, .menu1 {
background-color:#333399;
}
.menu1, #smenu1 li {
color:#FFFFFF;}
#smenu2, .menu2 {
background-color:#3399ff;}
#smenu2,.menu2 a {
color:#FFFFFF;}
#smenu3, .menu3 {
background-color:#339999;
}
#smenu3, .menu3 a {
color:#FFFFFF;}
#smenu4, .menu4 {
background-color:#339933;}
#smenu4, .menu4 a {
color:#FFFFFF;}
Modifié par alx75 (30 Nov 2006 - 02:53)
yes !!! 
)
