Problèmes avec mon menu déroulant
Résolu
Debutant en webmastering
Messages postés
444
Statut
Membre
-
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
j'ai quelques problèmes avec mon menu déroulant.
J'ai suivi le tutoriel du site du zéro et ais essayé de l'adapter à mon site mais apparemment sans grand succès.
Les 2 problèmes que je décèle clairement sont un affichage de ma sous-liste qui devrait être cachée et un hover de mes liens qui entre en conflit avec avec mon width.
Je vais donc joindre le JS (copié/collé du Site du zéro car j'avoue ne pas être très doué en JS) puis le HTML et enfin le CSS :
JS :
sfHover = function()
{
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
HTML :
<body>
<div id="site">
...
<ul class="menu">
<li><a href="Accueil.html">Accueil</a>
<img src="./images_polyservices/15860274.jpg" id="imageAccueil"></li>
<li><a href="Produit.html">Produit</a>
<img src="./images_polyservices/15860312.jpg" id="imageProduit"></li>
<li><a href="Societe.html">Société</a>
<img src="./images_polyservices/" id="imageSociété"></li>
<ul>
<li>
<a href="NousSituer.html">Nous situer</a>
<img src="./images_polyservices/15860234.jpg" id="imageNousSituer">
</li>
</ul>
</li>
<li><a href="NousContacter.html" >Nous contacter</a>
<img src="./images_polyservices/15860333.jpg" id="imageNousContacter"></li>
</ul>
...
</div>
</body>
</html>
et enfin le CSS :
#site
{
text-align : center;
background-image :url();
/*background-attachment : absolue;*/
background-repeat : repeat;
/*background-position :*/
border : 1px solid;
width : 1000px;
}
ul
{
padding:0; /* Aucune marge intérieure */
margin:0; /* Aucune marge extérieure */
list-style-type:none; /* Pas d'affichage de puces */
list-style : none; /* On supprime le style par défaut de la liste */
}
li
{
margin-left:0px; /* Aucune marge à gauche mais possibilité d'en mettre */
float:left; /*pour IE*/
list-style : none;
cursor : pointer;
background-color :#808080;
height : 58px;
text-align : center;
padding : 0px;
}
ul li a /* Contenu des listes */
{
display : block; /* On change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* Aucune marge intérieure */
background-color : #808080; /* Couleur de fond */
color : #FFFFFF; /* Couleur du texte */
width : 250px; /* Largeur */
text-align : center; /* Permet de centrer le texte */
text-decoration : none; /* On supprime le style par défaut des liens (la plupart du temps = souligné) */
line-height : 50px; /* Hauteur des lignes */
font-size : 25px; /* Taille d'écriture */
}
ul li a:hover /* Contenu des listes */
{
display : block; /* On change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* Aucune marge intérieure */
background : #808080; /* Couleur de fond */
color : #FFFFFF; /* Couleur du texte */
width : 230px; /* Largeur */
text-align : center; /* Permet de centrer le texte */
text-decoration : none; /* On supprime le style par défaut des liens (la plupart du temps = souligné) */
line-height : 50px; /* Hauteur des lignes */
font-size : 28px; /* Taille d'écriture */
}
.menu li
{
border-bottom : 1px solid;
}
#imageProduit
{
position : absolute;
top : 265px;
left : 20px;
z-index : 1;
}
#imageAccueil
{
position : absolute;
top : 260px;
left : 285px;
z-index : 1;
}
#imageSociété
{
position : absolute;
top : 260px;
left : 540px;
z-index : 1;
}
#imageNousContacter
{
position : absolute;
top : 260px;
left : 740px;
z-index : 1;
}
#imageNousSituer
{
position : absolute;
top : 318px;
left : 680px;
z-index : 1;
display : none;
}
#menu li ul ul
{
margin : -22px 0 0 179px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* Pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 179px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
En espérant ne pas avoir omis car j'ai sélectionné que le css concernant le menu.
PS : je n'attends pas forcément un code à copier/coller mais je cherche surtout où sont mes erreurs (et si quelqu'un pouvait me décrire le js en 1 ligne ou 2 ce serait super sympa)
--Signé: Debutant en webmastering
j'ai quelques problèmes avec mon menu déroulant.
J'ai suivi le tutoriel du site du zéro et ais essayé de l'adapter à mon site mais apparemment sans grand succès.
Les 2 problèmes que je décèle clairement sont un affichage de ma sous-liste qui devrait être cachée et un hover de mes liens qui entre en conflit avec avec mon width.
Je vais donc joindre le JS (copié/collé du Site du zéro car j'avoue ne pas être très doué en JS) puis le HTML et enfin le CSS :
JS :
sfHover = function()
{
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
HTML :
<body>
<div id="site">
...
<ul class="menu">
<li><a href="Accueil.html">Accueil</a>
<img src="./images_polyservices/15860274.jpg" id="imageAccueil"></li>
<li><a href="Produit.html">Produit</a>
<img src="./images_polyservices/15860312.jpg" id="imageProduit"></li>
<li><a href="Societe.html">Société</a>
<img src="./images_polyservices/" id="imageSociété"></li>
<ul>
<li>
<a href="NousSituer.html">Nous situer</a>
<img src="./images_polyservices/15860234.jpg" id="imageNousSituer">
</li>
</ul>
</li>
<li><a href="NousContacter.html" >Nous contacter</a>
<img src="./images_polyservices/15860333.jpg" id="imageNousContacter"></li>
</ul>
...
</div>
</body>
</html>
et enfin le CSS :
#site
{
text-align : center;
background-image :url();
/*background-attachment : absolue;*/
background-repeat : repeat;
/*background-position :*/
border : 1px solid;
width : 1000px;
}
ul
{
padding:0; /* Aucune marge intérieure */
margin:0; /* Aucune marge extérieure */
list-style-type:none; /* Pas d'affichage de puces */
list-style : none; /* On supprime le style par défaut de la liste */
}
li
{
margin-left:0px; /* Aucune marge à gauche mais possibilité d'en mettre */
float:left; /*pour IE*/
list-style : none;
cursor : pointer;
background-color :#808080;
height : 58px;
text-align : center;
padding : 0px;
}
ul li a /* Contenu des listes */
{
display : block; /* On change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* Aucune marge intérieure */
background-color : #808080; /* Couleur de fond */
color : #FFFFFF; /* Couleur du texte */
width : 250px; /* Largeur */
text-align : center; /* Permet de centrer le texte */
text-decoration : none; /* On supprime le style par défaut des liens (la plupart du temps = souligné) */
line-height : 50px; /* Hauteur des lignes */
font-size : 25px; /* Taille d'écriture */
}
ul li a:hover /* Contenu des listes */
{
display : block; /* On change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* Aucune marge intérieure */
background : #808080; /* Couleur de fond */
color : #FFFFFF; /* Couleur du texte */
width : 230px; /* Largeur */
text-align : center; /* Permet de centrer le texte */
text-decoration : none; /* On supprime le style par défaut des liens (la plupart du temps = souligné) */
line-height : 50px; /* Hauteur des lignes */
font-size : 28px; /* Taille d'écriture */
}
.menu li
{
border-bottom : 1px solid;
}
#imageProduit
{
position : absolute;
top : 265px;
left : 20px;
z-index : 1;
}
#imageAccueil
{
position : absolute;
top : 260px;
left : 285px;
z-index : 1;
}
#imageSociété
{
position : absolute;
top : 260px;
left : 540px;
z-index : 1;
}
#imageNousContacter
{
position : absolute;
top : 260px;
left : 740px;
z-index : 1;
}
#imageNousSituer
{
position : absolute;
top : 318px;
left : 680px;
z-index : 1;
display : none;
}
#menu li ul ul
{
margin : -22px 0 0 179px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* Pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 179px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
En espérant ne pas avoir omis car j'ai sélectionné que le css concernant le menu.
PS : je n'attends pas forcément un code à copier/coller mais je cherche surtout où sont mes erreurs (et si quelqu'un pouvait me décrire le js en 1 ligne ou 2 ce serait super sympa)
--Signé: Debutant en webmastering
3 réponses
Résumé de la discussion
Plusieurs difficultés entourent le menu déroulant : la sous-liste censée être cachée s'affiche et l'effet hover des liens entre en conflit avec la largeur définie actuelle du menu. Des échanges soulignent que le script réutilise des méthodes non standard (getElementByClass) et s'appuie sur des événements hétérogènes (attachEvent) selon IE, tandis que le CSS masque des éléments problématiques. Des utilisateurs constatent que le décalage et l'obsolescence des structures HTML (utilisation de div/ul imbriqués mal formés, id 'menu' vs classe) créent des problèmes d'affichage et de positionnement. En cas de persistance, plusieurs suggèrent de privilégier une solution CSS pure en hover et d'adapter la structure HTML, plutôt que de complexifier le script, sans conclure sur l'état du fil.
-
Salut,
sfHover = function() { // On récupère tous les tags li qui se trouvent dans l'id menu qui est dans le doc // Attention, toi tu as une classe menu et non un id menu var sfEls = document.getElementById("menu").getElementsByTagName("li"); // Pour tous ces li, on va appliquer les deux mêmes fonctions for (var i=0; i<sfEls.length; i++) { // Si on passe la souris, on applique la classe sfhover à l'élément sfEls[i].onmouseover=function() { this.className+=" sfhover"; } // Si on enlève sa souris, on enlève la classe rajoutée sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } // Charge la fonction shHover lors du chargement de la page // Attention ne fonctionne que sous IE ! if (window.attachEvent) window.attachEvent("onload", sfHover);-
Le attachEvent pour Firefox => http://forum.nerdzblog.com/cgi-sys/suspendedpage.cgi?t=146
-
-
Oui, j'ai testé chez moi.
Alors bon, je ne vois pas trop ce que tu veux faire en fait alors je sais pas si c'est ce que tu attends :$
Je teste sous IE afin que le attachEvent fonctionne. Et on ne voit pas le "Nous situer" sauf lorsqu'on place la souris sur "Société".
Sinon, tu fais un peu double emploi avec ton css et ton js. Vu que ce n'est qu'une question de class (hover ou non), pas besoin de rajouter du onmouseover et du onmouseout :$ Si tu n'as pas envie de réécrire à la main class="sfhover" pour tous tes li, tu fais dans ton js quelque chose comme ça :sfEls[i].className+=" sfhover";
-
-
-
-
Tu as autorisé le javascript sous IE ?
Il vaut mieux choisir display dans ce cas : http://www.journaldunet.com/developpeur/tutoriel/css/060718-difference-visibility-hidden-display-none.shtml
Attends, je vais te faire un truc tout simple parce que là, j'ai l'impression que tu te compliques la vie pour rien puisqu'il y a des outils qui font déjà tout ça !-
-
Alors plusieurs points.
D'abord pour faire en sorte qu'une fonction javascript se fasse lors du chargement de la page et pour que ça fonctionne sur tous les navigateurs, on utilise ceci :<BODY onLoad="fonction_js();" >
Je ne me suis pas occupé du remplissage automatique de tes li, ça je te laisse faire si tu as vraiment envie de le faire (généralement on fait ça à la main, hein... Ce n'est pas des menus avec 20 éléments ¬¬)
HTML<li onmouseover="sfHover(3, true)" onmouseout="sfHover(3,false)"> <a href="Societe.html">Société</a> <img src="test.php" id="imageSociété"> <ul style="display:none" id="3"> <li> <a href="NousSituer.html">Nous situer</a> <img src="test.jpg" id="imageNousSituer"> </li> </ul> </li>
J'ai mis ton sous-menu DANS ton menu. J'ai mis des chiffres (ici 3) au cas où tu voudrais réutiliser le onload et donc simplement récupérer le i quand tu listes tes li (je comprendrais si je ne suis pas clair XD) Si jamais tu veux reprendre le onload, il faudra ajouter les onmouseover et les onmouseout de ton niveau 1, les id et les styles de ton niveau 2.
Javascript
function sfHover(id, etat){
var sfEls = document.getElementById(id);
if(sfEls != null){
if(etat){
sfEls.style.display = 'block';
}else{
sfEls.style.display = 'none';
}
}
}
J'ai fait une fonction simple on je récupère l'id du sous-menu qu'on va afficher ou cacher, ainsi que son état (true ou false). Avec le premier if, si jamais il n'y a pas de sous-menu ça ne fait rien. Sinon, suivant son état, ça va afficher ou pas. -
-
-
-
-
Où veux-tu positionner ton image ?
