Merci !
J'ai mis à jour.
Voilà le code pour ceux que ça intéressera. Il s'agit donc d'un menu avec rollover (une seule image) avec affichage d'un sous-menu au survol en JS. J'ai donc utilisé le
tuto d'Alsa (Une image réactive en CSS avec une seule image et sans javascript). Bon le tout fait peut être un peu usine à gaz...
Le script :
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
Le menu :
<div id="MenuPrincipal" style="position:absolute; width:100%; height:30px; z-index:1; left: 0px;">
<ul id="Menu">
<li><a href="#" class="Moyen">Actualité</a></li>
<li><a href="#" class="Moyen">Météo & neige</a></li>
<li><a href="#" class="Moyen">Domaine skiable</a></li>
<li><a href="#" class="Moyen">Histoire</a></li>
<li onMouseOver="div.show('MenuPhototheque')" onMouseOut="div.hide('MenuPhototheque')"><a href="#" class="Moyen"><span>Photothèque</span></a>
<div id="MenuPhototheque" style="position:absolute; width:100%; height:30px; z-index:1; visibility: hidden; top: 30px; left: 0px;" onMouseOver="div.show('MenuPhototheque')" onMouseOut="div.hide('MenuPhototheque')">
<ul id="MenuSecondaire">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li><a href="#" class="Moyen">Photos d'hiver</a></li>
<li><a href="#" class="Moyen">Photos d'été</a></li>
<li><a href="#" class="Moyen">Photos anciennes</a></li>
<li><a href="#" class="Moyen">Panoramas</a></li>
</ul>
</div>
</li>
<li onMouseOver="div.show('MenuCollections')" onMouseOut="div.hide('MenuCollections')"><a href="#" class="Moyen">Collections</a>
<div id="MenuCollections" style="position:absolute; width:100%; height:30px; z-index:1; visibility: hidden; left: 0px; top: 30px;" onMouseOver="div.show('MenuCollections')" onMouseOut="div.hide('MenuCollections')">
<ul id="MenuSecondaire">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li><a href="#" class="Moyen">Plans des pistes</a></li>
<li><a href="#" class="Moyen">Forfaits</a></li>
<li><a href="#" class="Moyen">Documents</a></li>
<li><a href="#" class="Moyen">Films amateurs</a></li>
</ul>
</div>
</li>
<li><a href="#" class="Moyen">Forum</a></li>
<li><a href="#" class="Moyen">Liens</a></li>
<li><a href="#" class="Moyen">Livre d'or</a></li>
<li><a href="#" class="Moyen">À propos</a></li>
<li><a href="#" class="Moyen">Contact</a></li>
</ul>
</div>
J'ai utilisé des espaces insécables pour décaler le sous menu pour qu'ils soient au dessous du bon bouton, mais il doit y avoir une solution plus propre je pense... Je chercher encore !
Et le CSS :
ul#Menu
{
height:35px;
margin: 0 ;
padding: 0 ;
background: url(Sommaire.png) repeat-x 0 -30px ;
list-style-type: none ;
}
ul#Menu li
{
float: left ;
text-align: center ;
}
ul#Menu li a
{
width:auto;
min-width:65px;
padding: 0 7px;
line-height: 30px ;
font-size: 13px ;
color: #fff ;
display: block ;
text-decoration: none ;
}
ul#Menu li a:hover
{
background: url(Sommaire.png) repeat-x 0 0px ;
font-size: 13px ;
color: #000 ;
}
ul#MenuSecondaire
{
height:35px;
margin: 0 ;
padding: 0 ;
background: url(Sommaire2.png) repeat-x 0 -30px ;
list-style-type: none ;
}
ul#MenuSecondaire li
{
float: left ;
text-align: center ;
}
ul#MenuSecondaire li a
{
width:auto;
min-width:65px;
padding: 0 7px;
line-height: 30px ;
font-size: 13px ;
color: #fff ;
display: block ;
text-decoration: none ;
}
ul#MenuSecondaire li a:hover
{
background: url(Sommaire2.png) repeat-x 0 0px ;
font-size: 13px ;
color: #000 ;
}
Modifié par ARGo (13 Sep 2008 - 10:13)
