Menu css qui reste déroulé [Fermé]

Signaler
Messages postés
3
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
24 août 2009
-
Messages postés
3
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
24 août 2009
-
Bonjour,

je viens faire appel a vous, car ce que vous allez voir ci dessous est mon tout premier css.
En ce qui concerne le menu j'ai voulu pouvoir positionner les images des titres et sous titres et de même pour les textes.
J'ai cherché un peu partout, j'ai réussi a faire des choses mais le plus gros hic a ma connaissance est que je n'arrive pas a faire replier le menu.

code css

/*DEBUT MENU*/
#menuPosition {
position: absolute;
left: 100px;
top: 235px;
height:100%; /*a mettre en % si on veut que le background s affiche*/
width: 220px;
text-decoration: none;
list-style: none;
background-image: url("../graphiques/t_09kc.jpg");
background-repeat: repeat;
margin: 0px;

}


#menuDansDiv {
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
margin:0px;
left: 0px;
top: 0px;
height: 100%; /*a mettre en % si on veut que le background s affiche*/
width: 220px;
padding-top: 10px;
}

#menu {
list-style: none;
text-decoration: none;
margin: 0px;
padding-top: 10px; /*position de l image_titre*/
padding-left: 10px;
}
#menu .image_titre {
background-image:url("../graphiques/Animbouton.gif");
background-repeat:no-repeat;
text-decoration: none;
list-style: none;
line-height: 56px;
display: block;
margin: 0px;
}

#menu .texte_titre {
display:block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
list-style: none;
text-decoration: none;
padding-left: 65px; /*position du texte_titre*/
margin: 0px;
}
#menu a:link .texte_titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #2D2CCC;
list-style: none;
text-decoration: none;
margin: 0px;
display: block;

}
#menu a:visited .texte_titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
list-style: none;
text-decoration: none;
margin: 0px;
display: block;
}

#menu a:hover .texte_titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
list-style: none;
text-decoration: none;
margin: 0px;
display: block;
}
.menuSous {
display: none; /*pour faire disparaitre sousMenu*/
list-style: none;
text-decoration: none;
margin: 0px;
padding-top: 0px; /*position de l image sous_titre en haut*/
padding-left: 0px; /*position de l image sous_titre a gauche*/
display: block;
position: relative; /*pour caler l image sous-titre ou on veut a l interieur de menu*/
}
.menuSous .image_sous_titre {

background-image: url("../graphiques/boutonminikc.jpg");
background-repeat: no-repeat;
text-decoration: none;
list-style: none;
line-height: 35px;
display: block;
margin: 0px;
padding-left: 0px;
}
.menuSous .texte_sous_titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
list-style: none;
text-decoration: none;
padding-left:30px; /*position texte sous_titre*/
display: block;

}
.menuSous a:link .texte_sous_titre {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
font-style: normal;
font-weight: normal;
margin: 0px;
margin-top: 0px;
margin-left: 0px;
display:block;

}
.menuSous a:visited .texte_sous_titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
margin: 0px;
display: block;

}
.menuSous a:hover .texte_sous_titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #2D2CCC;
font-weight: bold;
margin: 0px;
text-decoration: none;
display: block;

}
#menu a:hover .texte_titre > .menuSous { /*pour faire disparaitre le sous menu*/
display: block;
}


/* FIN MENU */



code html
<div id="menuPosition">
<div id="menuDansDiv">
<ul id="menu">
<li class="image_titre"><a href="#"><span class="texte_titre">Titre menu</span></a>
<ul class="menuSous">
<li class="image_sous_titre"><a href="pages/conseil_administration.htm"><span class="texte_sous_titre">Conseil d'Administration</span></a></li>
<li class="image_sous_titre"><a href="pdf/ffmcloisirs_bafa-2008.pdf"><span class="texte_sous_titre">Bafa 2008</span></a></li>
<li class="image_sous_titre"><a href="pages/rien.htm"><span class="texte_sous_titre">Calendrier</span></a></li>
<li class="image_sous_titre"><a href="pages/bsr_plus.html"><span class="texte_sous_titre">Bsr Plus</span></a></li>
<li class="image_sous_titre"><a href="pages/tasses_pour_un_bol.html"><span class="texte_sous_titre">Tasses pour un bol</span></a></li>
<li class="image_sous_titre"><a href="pages/motostra_07.htm"><span class="texte_sous_titre">Album 2007 Motostra</span></a></li>
</ul>
</li>
<li class="image_titre"><a href="#"><span class="texte_titre">Titre menu</span></a>
<ul class="menuSous">
<li class="image_sous_titre"><a href="pages/tasses_07.htm"><span class="texte_sous_titre">Album 2008 Bol d'or</span></a></li>
<li class="image_sous_titre"><a href="pages/actualite.htm"><span class="texte_sous_titre">Actualité</span></a></li>
<li class="image_sous_titre"><a href="pages/contact.htm"><span class="texte_sous_titre">Contact</span></a></li>
<li class="image_sous_titre"><a href="pages/activite.htm"><span class="texte_sous_titre">Activités</span></a></li>
<li class="image_sous_titre"><a href="pages/projet_pedagogique.htm"><span class="texte_sous_titre">Projet Pédagoqique</span></a></li>
<li class="image_sous_titre"><a href="pages/structure_adherente_07.html"><span class="texte_sous_titre">Structures adhérentes</span></a></li>
</ul>
</li>
<li class="image_titre"><a href="#"><span class="texte_titre">Retour Accueil</span></a>
<ul class="menuSous">
<li class="image_sous_titre"><a href="pages/conseil_administration.htm"><span class="texte_sous_titre">Conseil d'Administration</span></a></li>
<li class="image_sous_titre"><a href="pdf/ffmcloisirs_bafa-2008.pdf"><span class="texte_sous_titre">Bafa 2008</span></a></li>
<li class="image_sous_titre"><a href="pages/rien.htm"><span class="texte_sous_titre">Calendrier</span></a></li>
<li class="image_sous_titre"><a href="pages/bsr_plus.html"><span class="texte_sous_titre">Bsr Plus</span></a></li>
<li class="image_sous_titre"><a href="pages/tasses_pour_un_bol.html"><span class="texte_sous_titre">Tasses pour un bol</span></a></li>
<li class="image_sous_titre"><a href="pages/motostra_07.htm"><span class="texte_sous_titre">Album 2007 Motostra</span></a></li>
</ul>
</li>
</ul>
</div>
</div>


Merci@Bientôt de vous lire

2 réponses

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Bonjour,

Il y a des erreurs dans ce menu:
.menuSous {
display: none; /*pour faire disparaitre sousMenu*/
list-style: none;
text-decoration: none;
margin: 0px;
padding-top: 0px; /*position de l image sous_titre en haut*/
padding-left: 0px; /*position de l image sous_titre a gauche*/
/* display: block; <- Ce display est une erreur, il empèche le menu de se cacher */
position: relative; /*pour caler l image sous-titre ou on veut a l interieur de menu*/
} 

et on remplace
#menu a:hover .texte_titre > .menuSous { /*pour faire disparaitre le sous menu*/
display: block;
} 

par
#menu li:hover  .menuSous { /*pour faire APPARAITRE le sous menu*/
display: block;
} 


Cependant, attention de bien tester sur tous les navigateurs.
Ce code marche pour Firefox, Opera, Safari, Chrome, mais est incompatible avec IE. (IE7 ne comprend pas le li:hover et IE8 le comprend mais on ne peut pas aller sur les éléments du sous-menu.)

Et le rendu est différent selon les navigateurs également.

Je te conseille donc de mettre tout ton css en commentaire et de décommenter en pas-à-pas pour ne pas trop en mettre et trouver d'où viennent les différences de rendu.

Pour la compatibilité avec IE, ben il faut malheureusement passer par javascript. une petite recherche sur le net t'orientera vers la bonne méthode pour la compatibilité IE d'un menu déroulant en css.
Messages postés
3
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
24 août 2009

Bonjour m@dien,

Merci beaucoup, pour tes conseils avisés et tes explications claires.
Çà y est le menu apparait, et comme tu l'as si bien décrit pas du tout sous ie.
Je vais donc suivre tes conseils.
Dès que je trouve je reviens mettre les soluces.