Menu déroulant à trois niveaux !

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Menu déroulant à trois niveaux !

martiidu87

Bonjour,

J'aimerais avoir un peu d'aide SVP car j'ai très bien réussi mon menu déroulant mais il faut que je rajoute un troisième niveau et je bloque un peu
Que faut-il que je rajoute dans le css pour afficher un 3eme niveau SVP ?
Voici mon code html et css :

Code :

<div id="main_menu">
<ul class="navfxenabled">
<li>
<a href="*******" class="cat1">*******</a>
</li>
<li>
<a href="#" class="cat2">*******</a>
<ul>
<li>
<a href="" class="cat22">*******</a>
</li>
<li>
<a href="" class="cat22">*******</a>
<ul id="niveau3">
<li><a href="#">*******</a></li>
<li><a href="#">*******</a></li>
<li><a href="#">*******</a></li>
</ul>
</li>
<li>
<a href="#" class="cat22">*******</a>
</li>
<li>
<a href="#" class="cat22">*******</a>
</li>
<li>
<a href="#" class="cat22">*******</a>
</li>
<li>
<a href="#" class="cat22">*******</a>
</li>
</ul>
</li>
<li>
<a href="#" class="cat3">*******</a>
<ul>
<li>
<a href="#" class="cat33">*******</a>
</li>
<li>
<a href="#" class="cat33">*******</a>
</li>
<li>
<a href="#" class="cat33">*******</a>
</li>
<li>
<a href="#" class="cat33">*******</a>
</li>
</ul>
</li>
<li>
<a href="#" class="cat4">*******</a>
<ul>
<li>
<a href="#" class="cat44">*******</a>
</li>
<li>
<a href="#" class="cat44">*******</a>
</li>
<li>
<a href="#" class="cat44">*******</a>
</li>
<li>
<a href="#" class="cat44">*******</a>
</li>
</ul>
</li>
<li>
<a href="" class="cat5">*******</a>
</li>
<li>
<a href="" class="cat6">*******</a>
</li>
</ul>
</div>

et mon css :

Code :

#main_menu {/* réglage général du menu */
background: transparent;/* couleur fond général */
display: table;/* si on enlève cette partie plus de fond général */
width: auto;/* largeur à adapter */
margin: 0 0 0px 0;/* marge inférieure après le menu, et centrage de l'ensemble dans le bloc */
font-size:18px;/* taille caractères */
line-height:9px;/*pour des éléments centrés verticalement, mettre la même valeur que la hauteur de caractères*/
font-family: "Times New Roman", Arial, Helvetica, Georgia, Sans-serif;
text-align:left;/*aligne à gauche les liens*/
font-style: italic ;
}
#main_menu ul {/* ouverture de liste */
position: relative;
z-index:3;
padding: 0px 0px;/* retrait par rapport au fond général */
display:block;
}
#main_menu li {/* élément de liste, les catégories */
float: left;/* se positionne sur la gauche et se suivent si plusieurs */
padding: 0px;/* pas de retrait */
position: relative;
color: #fff;/* couleur caractère des listes qui ne sont pas des liens (le slash entre les cat seules) */
list-style-type: none;/* pas de puces */
display:block;
}
#main_menu a {/* liens du menu */
display: block;
color: #f4f5e9;/* couleur lien */
text-decoration: none;/* pas de surlignage naturel */
font-family: "Times New Roman", Arial, Helvetica, Georgia, Sans-serif;
padding: 0px 0px;/* retrait */
}
#main_menu a:hover, #main_menu a:focus {/* survol des liens */
display: block;
font-family: "Times New Roman", Arial, Helvetica, Georgia, Sans-serif;
color: white;/* couleur lien */
}
#main_menu li li {/* sous-menu */
display: block;/* fait que les sous-menus soient les uns sous les autres */
float: none;
}
#main_menu li ul {/* fait que les sous-menus ne soient pas visibles hors survol */
display: none;
position: absolute;
width: 193px;/* largeur des sous-menus */
}
#main_menu li:hover ul,
#main_menu .navfxenabled li.hover ul {/* fait que les sous-menus soient visibles au survol */
display: block;
}
#main_menu ul li ul {/* pas de retrait pour les sous-menus */
margin-left:0px;
margin-top: -1px;
}

Merci d'avance

Message édité par martiidu87 le 21-05-2012 à 16:04:48

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

Publicité

martiidu87

personne ?

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

rufo

Pas me confondre avec Lycos!

Tu veux dire avec des <a> ayant pour class="cat222", ça c'est ça?

parce que j'ai bien vu ton <ul id="niveau3"> mais j'imagine que tu dois pouvoir avoir à différent endroits dans ton menu des items de niveau 3 dans le menu? Si oui, alors faut pas utiliser l'attribut id mais class puisque chaque id doit être unique...

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

martiidu87

D'abord merci pour ta réponse !
Oui le niveau trois va se répéter dans deux autres rubriques.
Et oui, pour la class="222".

J'ai du mal à comprendre comment je dois m'y prendre pour faire disparaitre le "niveau3" et le faire réapparaitre au survol de mon bouton.
Comment je l’intègre au CSS... ?

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

rufo

Pas me confondre avec Lycos!

ben comme je te le disais, utilise l'attribut class plutôt qu'id. Et ensuite, disposes là où ça va bien (= là où t'as besoin de niveaux 3) les <ul class="Niveau3">...</ul>.

martiidu87

et pour le css ça donne quoi ? je dois appliquer la même chose que pour cat22 c'est à dire display : none; et display: block ?

au faite extrait du cat2

Code :

#main_menu .cat2, #main_menu .cat2 ul {
background-image:url(/images/bleuclaire.jpg);
background-repeat:repeat x;
padding-left: 20px;/* pas de retrait */
padding-top: 24px;
margin-right: -28px;
padding-bottom: 24px;
width: 143px;
}
#main_menu .cat2:hover, #main_menu .cat2 ul:hover{
background: #0188cf;
padding-left: 20px;/* pas de retrait */
padding-top: 24px;
margin-right: -28px;
padding-bottom: 24px;
display: block;
}
#main_menu .cat22, #main_menu .cat22 ul {
line-height: 40px;
background: #0188cf;
padding-left: 10px;
border-bottom: 1px dotted #006fac;
}
#main_menu .cat22:hover, #main_menu .cat22 ul:hover {
background: #0173af;
}

Message édité par martiidu87 le 22-05-2012 à 14:22:29

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

rufo

Pas me confondre avec Lycos!

Oui, avec probablement plus de décalage à gauche...

martiidu87

désolé mais perso je bug :??: lol je viens de rajouter ça :

Code :

#main_menu li li:hover ul {
left: 150px;
top: 0;
display: block;
}

et ça :

Code :

#main_menu li ul li {
display: none;
position: absolute;
width: 193px;
}

Au survol c'est ok le texte apparait correctement comme demandé sur la droite, mais avant le survol il apparait sous la rubrique parente...

Message édité par martiidu87 le 22-05-2012 à 16:41:12

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

rufo

Pas me confondre avec Lycos!

plutôt que de mettre des règles sur #main_menu li ul li, tu ferais mieux de mettre une class à ton ul qui correspond à ton Niveau 3 et écrire des règles css en fonction de cette class.

martiidu87

oui donc ça va donner ça :

Code :

<ul class="niveau3">
<li><a class="cat222" href="#">*******</a></li>
<li><a class="cat222" href="#">*******</a></li>
<li><a class="cat222" href="#">*******</a></li>
</ul>

Code :

#main_menu li li:hover > ul,
#main_menu .navfxenabled li li.hover > ul {/* fait que les sous-menus soient visibles au survol */
display: block;
left: 193px;
margin-top: 0px;
top: 0;
}
.niveau3
{
display: none;
position: absolute;
width: 193px;/* largeur des sous-menus */
}

J'ai simplement rajouté le .niveau3 pour faire disparaitre le texte sauf que ça ne fonctionne toujours pas...

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

Publicité

pop-pan

yay!

t'as pas besoin de rajouter des tonnes de classes normalement.

http://jsfiddle.net/A7bRY/3/

Message édité par pop-pan le 22-05-2012 à 19:30:57

---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins

rufo

Pas me confondre avec Lycos!

sauf si le menu est généré par un outil de type CMS et qu'il est possible d'affecter un style différent à chaque item de menu (par ex, une boutique en ligne)...

martiidu87

Bon je vous ai envoyé le lien en mp (c'est le site d'une commune et il est en construction)
Pour voir le résultat regardez dans la rubrique commune, conseil municipal...
J'ai essayé avec une classe pour le niveau 3 mais c'est toujours pareil.
Je commence à en avoir marre il y a un truc qui fait déconner le reste de mon code css...

Message édité par martiidu87 le 22-05-2012 à 22:38:23

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

rufo

Pas me confondre avec Lycos!

Je ne peux pas rentrer sur le site, je suis bloqué sur la page d'accueil et y'a pas le menu déroulant

Edit : vu que ton site est sous Wordpress, tu devrais peut-être regarder si y'aurait pas un plugin qui ferait le menu comme tu veux...

Message édité par rufo le 23-05-2012 à 09:49:39

martiidu87

non mais c'est résolu enfin et les plugins sont vraiment "bidons" en plus la plus part sont en anglais

voici la solution à mon problème :

Code :

<li class="soussousmenugauche">
<a href="" class="cat22">Conseil municipal</a>
<ul>
<li class="cat222"><a href="#">*******</a></li>
<li class="cat222"><a href="#">*******</a></li>
<li class="cat222"><a href="#">*******</a></li>
</ul>
</li>

Code :

#main_menu li ul .soussousmenugauche ul {/* fait que les sous-menus ne soient pas visibles hors survol */
display: none;
position: absolute; }
#main_menu li ul .soussousmenugauche:hover ul {/* fait que les sous-menus soient visibles au survol */
display: block;
left: 193px;
top: 1px; }
#main_menu .cat222, #main_menu .cat222 ul {
line-height: 40px;
background: #0188cf;
padding-left: 10px;
border-bottom: 1px dotted #006fac;
border-left: 1px solid #0b92d9;
}
#main_menu .cat222:hover, #main_menu .cat222 ul:hover {
background: #0173af;
}

Donc merci pour votre aide les gars !

Message édité par martiidu87 le 23-05-2012 à 09:58:22

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm

FORUM HardWare.fr

Programmation

HTML/CSS

Menu déroulant à trois niveaux !

Sujets relatifs
Winpe Menu.vbs de microsoft (ajout fonction en local disque usb)	Wordpress exclure une page du menu
Menu déroulant multicolore	rajouter une commande au menu clic droit
réaliser un programme permettant de faire le PGCD de trois nombres	Menu horizontal full CSS
créer un video/chat pour trois personnes sur mon site	créer un video/chat pour trois personnes !!
[CSS3] Pb de remonté menu animé
Plus de sujets relatifs à : Menu déroulant à trois niveaux !

Page générée en 0.090 secondes