Bonjour,
Voilà je cherche à faire un menu vertical avec sous-menus (en fait trois identiques mais de couleurs différentes pour identifier des rubriques). Les menus s'affichent parfaitement sous IE mais pas avec Firefox. Avec ce navigateur les menus se superposent et je ne vois pas d'où peut venir le problème.
Voici les deux portions de code qui correspondent au menu:
...le javascript
Je joint l'aperçu de ce que donne le menu sous Firefox et sous IE.
Je vous remercie par avance de votre aide en espérant qu'il est possible de résoudre ce problème.
T.
[/i][/i]
Voilà je cherche à faire un menu vertical avec sous-menus (en fait trois identiques mais de couleurs différentes pour identifier des rubriques). Les menus s'affichent parfaitement sous IE mais pas avec Firefox. Avec ce navigateur les menus se superposent et je ne vois pas d'où peut venir le problème.
Voici les deux portions de code qui correspondent au menu:
<html>
<head>
<style type="text/css">
/*vert*/
.titrev{
background:url(images/titrev.jpg);
background-repeat:no-repeat;
color:#94AA74;
width:143px;
height:22px;
text-align:center;
}
.vmenuv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 143px; /* Width of Menu Items */
height:32px;
}
.vmenuv ul li{
position: relative;
height:32px;
}
/*Sub level menu items */
.vmenuv ul li ul{
position: absolute;
width: 143px; /*sub menu width*/
height:32px;
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.vmenuv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
font-family:inherit;
text-decoration: none;
font-weight:normal;
color: #5E7830;
text-decoration: none;
background: url(images/menuv.gif);
padding: 1px 5px;
height:32px;
border-bottom: 0;
}
.vmenuv ul li a:visited{
height:32px;
}
.vmenuv ul li a:hover{
height:32px;
background: url(images/menuv02.gif);
color: #26370A;
}
/* Holly Hack for IE \*/
* html .vmenuo ul li { float: left; height:32px;}
* html .vmenuo ul li a { height:32px;}
/* End */
/*bleu*/
.titreb{
background:url(images/titreb.jpg);
background-repeat:no-repeat;
color:#8899aa;
width:143px;
height:22px;
text-align:center;
}
.vmenub ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 143px; /* Width of Menu Items */
height:32px;
}
.vmenub ul li{
position: relative;
height:32px;
}
/*Sub level menu items */
.vmenub ul li ul{
position: absolute;
width: 143px; /*sub menu width*/
height:32px;
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.vmenub ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #0e69be;
text-decoration: none;
background: url(images/menub.jpg);
padding: 1px 5px;
height:32px;
border-bottom: 0;
}
.vmenub ul li a:visited{
height:32px;
}
.vmenub ul li a:hover{
height:32px;
background: url(images/menub02.jpg);
color: #26370A;
}
/* Holly Hack for IE \*/
* html .vmenuo ul li { float: left; height:32px;}
* html .vmenuo ul li a { height:32px;}
/* End */
/*orange*/
.titreo{
background:url(images/titreo.jpg);
background-repeat:no-repeat;
color:#a7672d;
width:143px;
height:22px;
text-align:center;
}
.vmenuo ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 143px; /* Width of Menu Items */
height:32px;
}
.vmenuo ul li{
position: relative;
height:32px;
}
/*Sub level menu items */
.vmenuo ul li ul{
position: absolute;
width: 143px; /*sub menu width*/
height:32px;
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.vmenuo ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #8a5525;
text-decoration: none;
background: url(images/menuo.jpg);
padding: 1px 5px;
height:32px;
border-bottom: 0;
}
.vmenuo ul li a:visited{
height:32px;
}
.vmenuo ul li a:hover{
height:32px;
background: url(images/menuo02.jpg);
color: #543416;
}
/* For IE \*/
* html .vmenuo ul li { float: left; height:32px;}
* html .vmenuo ul li a { height:32px;}
/* End */
</style>
<script type="text/javascript" src="menu_vertical.js"></script>
</head>
<body>
<div class="vmenuv">
<ul><li class="titrev">Formations</li></ul>
<ul id="niveau1v">
<li><a href="#">Formations 1 »</a>
<ul>
<li><a href="#">Formations 1</a></li>
<li><a href="#">Formations 2</a></li>
</ul>
</li>
<li><a href="#">Formations 2 »</a>
<ul>
<li><a href="#">Formations 1</a></li>
<li><a href="#">Formations 2</a></li>
</ul>
</li>
<li><a href="#">Formations 3 »</a>
<ul>
<li><a href="#">Formations 1</a></li>
<li><a href="#">Formations 2</a></li>
</ul>
</li>
</ul>
</div>
 
<div class="vmenub">
<ul><li class="titreb">Logiciels</li></ul>
<ul id="niveau1b">
<li><a href="#">Logiciels 1 »</a>
<ul>
<li><a href="#">Logiciels 1</a></li>
<li><a href="#">Logiciels 2</a></li>
</ul>
</li>
<li><a href="#">Logiciels 2 »</a>
<ul>
<li><a href="#">Logiciels 1</a></li>
<li><a href="#">Logiciels 2</a></li>
</ul>
</li>
</ul>
</div>
 
<div class="vmenuo">
<ul><li class="titreo">Sites</li></ul>
<ul id="niveau1o">
<li><a href="#">Sites 1 »</a>
<ul>
<li><a href="#">Sites 1</a></li>
<li><a href="#">Sites 2</a></li>
</ul>
</li>
<li><a href="#">Sites 2 »</a>
<ul>
<li><a href="#">Sites 1</a></li>
<li><a href="#">Sites 2</a></li>
</ul>
</li>
</ul>
</div>
</ul>
</div>
</body>
</html>...le javascript
var menuids=["niveau1v","niveau1b","niveau1o"]
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstylev"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)Je joint l'aperçu de ce que donne le menu sous Firefox et sous IE.
Je vous remercie par avance de votre aide en espérant qu'il est possible de résoudre ce problème.
T.
[/i][/i]