Finalement, je m'en suis sortie toute seule. En effet, c'est grace aux css que j'ai réussi à regler le probleme de visibilité.
En fait, j'ai mis la div que je déplace dans une div immobile qui a comme propriétés overflow: hidden.
Comme j'ai bien galéré sur ce menu, je vais mettre mon code en ligne pour en faire profiter tout le monde...
J'ai essayé au maximum d'avoir un menu accessible à tous, en particulier qd javascipr est désactivé quelque soit le navigateur...
Tous les commentaires constructifs sont les bienvenus
D'abord le code html
<div id="menu">
<div class="menu-box">
<a href=# class="head-link">Reservations</a>
<div class="visibility-menu-box">
<div class="sub-menu-box" >
<a href="how_to_book.jsp?lang=<%=lang %>">How to book</a>
<a href="corporate.jsp?lang=<%=lang %>" >Corporate</a>
<a href="offers.jsp?lang=<%=lang %>">Offers</a>
<a href="tariffs.jsp?lang=<%=lang %>" >Tariffs</a>
</div>
</div>
</div>
<div class="menu-box">
<a href=# class="head-link">Bedrooms</a>
<div class="visibility-menu-box">
<div class="sub-menu-box">
<a href="standard_rooms.jsp?lang=<%=lang %>">Standard rooms</a>
<a href="executive_rooms.jsp?lang=<%=lang %>" >Executive rooms</a>
<a href="junior_suites.jsp?lang=<%=lang %>">Junior Suites</a>
</div>
</div>
</div>
</div>
Maintenant le code css
#menu .menu-box {
position: relative;
float: left;
z-index: 3;
}
#menu .visibility-menu-box {
position: absolute;
left: 0px;
top: 16px;
width: 190px;
overflow: hidden;
padding-top: 1px;
}
#menu .sub-menu-box {
display: none;
width: 190px;
position: relative;
background: #ecebe7;
z-index: 3;
}
#menu .menu-box:hover> div .sub-menu-box{
display: block;
}
La dernière catégorie css est faite pour les utilisateurs de firefox ou ie7 qui ont désactivé javascript. Pour les utilisateurs d'ie6, voir l'adaptation à la fin
Le code javascript
speed= 10;
pas=10;
/** Cette fonction est appelée au début, elle replace tous les sous menus à une position initiale, elle permet aussi de redéfir certaine propriétés que l'on aura changer pour ie6, voir les adapations à la fin du poste **/
function positionSubMenus() {
var divs= document.getElementsByTagName('div');
var elt;
var i;
for(i=0;i<divs.length;i++) {
elt=divs.item(i);
if(elt.className=='sub-menu-box') {
elt.style.left="0px";
elt.style.top="-200px";
elt.style.display="none";
}
if(elt.className=='visibility-menu-box') {
elt.style.position= "absolute";
elt.style.top="16px";
}
}
}
/** Cette fonction lance l'affichage et le déplacement des sous menus **/
function showSubMenu(menu) {
var sub_menu= menu.getElementsByTagName('div')[1];
sub_menu.style.display="block";
/** si le sous menu est en position initiale, on le replace juste au dessus de sa zone d'affichage grace à offsetHeigh qui nous sa hauteur **/
/** On ne le fait qu'une fois, sinon il a tendence à se replacer alors qu'on navigue à l'intérieur **/
if(sub_menu.style.top=="-200px") sub_menu.style.top=-sub_menu.offsetHeight+"px";
/** On va se servir de la fonction setInterval, si un menu est déjà en déplacement, on annule d'abord le déplacement en cours avec clearInterval **/
if(sub_menu.interval) clearInterval(sub_menu.interval);
/** cette syntaxe de setInterval permet de passer des arguments à la fonction répétée et est acceptée par tous les navigateurs **/
sub_menu.interval= setInterval(function () { move(sub_menu); },speed);
}
function hideSubMenu(menu) {
var sub_menu= menu.getElementsByTagName('div')[1];
if(sub_menu.interval) clearInterval(sub_menu.interval);
sub_menu.interval= setInterval(function () { moveBack(sub_menu); },speed);
}
/** mouvement de descente **/
/** On se sert de la propriété top des sous menus pour les déplacer **/
/** On peut aussi utiliser offsetTop, mais comme il n'est pas interprété de la même facon par tous les navigateurs, j'ai préféré la première solution **/
function move(sub_menu) {
var top = parseInt(sub_menu.style.top);
top+=pas;
if(top>=0) {
clearInterval(sub_menu.interval);
top=0;
}
sub_menu.style.top=top+"px";
}
/** Mouvement de remontée **/
function moveBack(sub_menu) {
var top=parseInt(sub_menu.style.top);
top-=pas;
if(top<=-sub_menu.offsetHeight) {
clearInterval(sub_menu.interval);
top=-sub_menu.offsetHeight;
sub_menu.style.display="none";
}
sub_menu.style.top=top+"px";
}
/** Pour mieux séparer le javascript du html, on insère de facon dynamique les onmouseover et onmouseout au chargement de la page **/
function setHover() {
var i;
var j;
var divs = document.getElementsByTagName('div');
var elt;
for(i=0;i<divs.length;i++) {
elt= divs.item(i);
if(elt.className=="menu-box" || elt.className=="cache-select" ) {
elt.onmouseover = function() { showSubMenu(this); }
elt.onmouseout = function() { hideSubMenu(this); }
}
}
}
function begin() {
positionSubMenus();
setHover();
}
window.onload = begin;
Maintenant, il reste encore un problème à régler : les utilisateurs d'ie6 qui ont désactiver javascript ne voient pas les sous menus, pour remédier à cela, on crée une page de style pour ie6 ou l'on change quelques propriétés
#menu .visibility-menu-box {
position: relative;
top: 0px;
}
#menu .sub-menu-box {
display: block;
}
On l'insère dans head grace à la balise
<!--[if lte IE 6]>
<style> @import "css/menuIE6.css";</style>
<![endif ]-->
Ces propiétés sont corrigées par javascript qd il est activé, sinon, cela rend mon site très moche mais tout le menu est visible et ne recouvre pas le texte, grace à la modification de abslute en relative.
Voilà, j'espère que ca en aidera certains
pour voir le résultat sur le site que je construit :
www1.portalin1.com/gresham
Modifié par yahrou (05 Jan 2007 - 16:58)
