Bonjour,
Je cherche désespérément une solution à mon problème : j'ai un menu déroulant à plusieurs niveaux en CSS/javascript, mais je ne peux le mettre qu'1 fois dans mon code html, puisqu'il est défini par un ID. Et moi, j'aurai besoin d'en mettre plusieurs (au minimum 3) sur la même page.
Voici le code CSS:
Le code html (avec le javascript dans le head)
J'ai bien essayé de feinter en créant une classe primavy-nav1, une classe primary-nav2, etc... et en mettant également plusieurs javascripts correspondants, mais ça ne fonctionne pas...
Je sais plus quoi faire!!
Un grand merci d'avance à celui ou celle qui pourra me donner la solution.
Edit par Felipe: remplacement de la variable i par j sinon le forum interprète tableau[_i] par la mise en italique ...
Modifié par Felipe (30 Jan 2006 - 21:18)
Je cherche désespérément une solution à mon problème : j'ai un menu déroulant à plusieurs niveaux en CSS/javascript, mais je ne peux le mettre qu'1 fois dans mon code html, puisqu'il est défini par un ID. Et moi, j'aurai besoin d'en mettre plusieurs (au minimum 3) sur la même page.
Voici le code CSS:
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug */
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #777;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0;
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }
ul#primary-nav li a:hover { color: #E2144A; }
Le code html (avec le javascript dans le head)
<head>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var j=0; j<navItems.length; j++) {
if(navItems[j].className == "menuparent") {
navItems[j].onmouseover=function() { this.className += " over"; }
navItems[j].onmouseout=function() { this.className = "menuparent"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
</head>
<body>
<ul id="primary-nav">
<li><a href="#">Home</a></li>
<li class="menuparent"><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li class="menuparent"><a href="#">Hosting</a>
<ul>
<li><a href="#">Dedicated</a></li>
<li><a href="#">Virtual</a></li>
<li><a href="#">Shared</a></li>
<li><a href="#">Managed</a></li>
</ul>
</li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
J'ai bien essayé de feinter en créant une classe primavy-nav1, une classe primary-nav2, etc... et en mettant également plusieurs javascripts correspondants, mais ça ne fonctionne pas...
Je sais plus quoi faire!!
Un grand merci d'avance à celui ou celle qui pourra me donner la solution.
Edit par Felipe: remplacement de la variable i par j sinon le forum interprète tableau[_i] par la mise en italique ...
Modifié par Felipe (30 Jan 2006 - 21:18)
