Menu css qui reste déroulé

Fermé
appel2phare Messages postés 3 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 24 août 2009 - 23 août 2009 à 18:21
appel2phare Messages postés 3 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 24 août 2009 - 24 août 2009 à 17:36
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
A voir également:

2 réponses

Réponse 1 / 2
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
24 août 2009 à 10:01
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.
0
Réponse 2 / 2
appel2phare Messages postés 3 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 24 août 2009
24 août 2009 à 17:36
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.
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Touche de clavier qui reste active
Morcant -
Morcant -

8 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses