Bonjour à tous !
Alors aujourd'hui, j'ai reçu une demande de mise à jour d'un menu, que je dois créer en css, sous un joomla ( beurk ).
J'ai tenté d'adapter le tuto Grafikart d'un menu déroulant en css, créé en dd dt dl, avec un menu en ul li ul li. Pas trop de problèmes sauf quelque uns tout de même majeurs :
Le menu :
<ul class="menu">
<li><a href="#"><span>Accueil</span>
<ul><li><a href="#"><span>Nous rejoindre</span></li>
<li><a href="#"><span>Notre histoire</span></li>
<li><a href="#"><span>xxx</span></li>
</ul></li>
<li><span>Divers</span>
<ul><li><a href="#"><span>blablabla</span></li>
<li><a href="#"><span>yyy</span></li>
<li><a href="#"><span>zzz</span></li>
</ul></li>J'ai donc des menus avec href et déroulants, d'autres sans lien toujours déroulants. Si je passe ma souris sur "Accueil" tout se passe bien le sous menu s'ouvre, si je tente d'aller sur un sous menu :
1er problème, ce dernier disparait, impossible d'aller dessus.
2eme problème, malgré un cursor pointer et un display block sur le .menu li, je dois placer mon curseur au dessus de la span divers pour dérouler le sous menu, qui ensuite revient au probleme n°1, se ferme lorsque je tente d'aller dessus.
Je suis un peu perdu, je vous donne le css du menu, enfin ce que j'ai pu faire jusqu'à présent. Merci d'avance pour votre aide à tous :)
.menu li {
height: 40px;
margin: 0;
padding: 0;
display: block;
float: left;
}
.menu li:hover ul li {
display: block;
}
.menu li ul li {
display: none;
}
.menu li {
display: block;
height: 40px;
color: #fff;
line-height: 40px;
text-align: center;
cursor: pointer!important;
width: 150px;
}
.menu li ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
.menu li ul li a {
color: #fff;
text-decoration: none;
height: 30px;
line-height: 30px;
display: block;
}
.menu li ul li a:hover {
background: #333;
color: #FF0000;Je peux mettre un lien vers le site, mais en attendant une solution, un autre menu a été placé ( celui qu'on essaie de changer ), vous ne verrez donc pas. Au pire, je peux mettre le menu de base à la dmeande :)
11 réponses
essai ça :
.menu li{position:relative;}et tes ul de sous menu en
.menu ul{position:absolute;top:40px;left:0}cela devrait fonctionner avec le css que tu as ;)
En fait tu le forces en display block avec un height à 40px du coup lorsque ta souris va dans le ul le navigateur interprête ton css et pour lui le li:hover ne fait que 40px et considèrent que tu n'es plus dans le li
change également ceci :
.menu li:hover ul li {
display: block;
}
.menu li ul li {
display: none;
}en
.menu li:hover ul {
display: block;
}
.menu li ul{
display: none;
}tu peux même mettre un overflow:hidden à tout tes ul pour forcer leur contenu ;)
Petite MAJ :
Le 1er menu fonctionne ( Accueil ), j'avais oublié les margin et padding 0 sur li ul.
Mais ça n'est pas fonctionnel sur les autres menus. tous les autres, liens ou pas. le curseur doit se placer au dessus pour afficher les sous menus, et le tout disparaît lorsque l'on tenter de s'y rendre.
Utilise des class au lieux d'utiliser que des balises pour identifier dans ton CSS. Car pour ça:
.menu li {
display: block;
height: 40px;
color: #fff;
line-height: 40px;
text-align: center;
cursor: pointer!important;
width: 150px;
}Ça s'applique à la fois au li comme celui qui contient la span Accueil mais aussi à ceux d'en dessous, donc des li comme "Notre histoire"
Sinon tu as d'autres problèmes, comme des balises <a> non fermer dans ton sous-menu, plusieurs styles pour la même classe (.menu li)
Je te propose cette solution:
.menu .menu-item {
cursor: pointer;
color: #fff;
display: block;
float: left;
line-height: 40px;
margin: 0;
padding: 0;
text-align: center;
height: 40px;
width: 150px;
}
.menu .menu-item .sub-menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.menu .menu-item:hover .sub-menu {
display: block;
}
.menu .menu-item .sub-menu a {
color: #fff;
display: block;
line-height: 30px;
text-decoration: none;
height: 30px;
}
.menu .menu-item .sub-menu a:hover {
background: #333;
color: #FF0000;
}
<ul class="menu">
<li class="menu-item">
<a href="#"><span>Accueil</span></a>
<ul class="sub-menu">
<li><a href="#"><span>Sous-menu 1</span></a></li>
<li><a href="#"><span>Sous-menu 2</span></a></li>
<li><a href="#"><span>Sous-menu 3</span></a></li>
</ul>
</li>
<li class="menu-item">
<span>Divers</span>
<ul class="sub-menu">
<li><a href="#"><span>Sous-menu 1</span></a></li>
<li><a href="#"><span>Sous-menu 2</span></a></li>
<li><a href="#"><span>Sous-menu 3</span></a></li>
</ul>
</li>
</ul>Bonjour et merci nairolf.
Alors voilà, le truc, c'est que c'est le menu Joomla. D'autant que je puisse le voir, c'est merdique, et je ne trouve aucune possibilité pour changer le style de menu ( si je veux un menu en dd dt dl, si je veux donner des id ou des class... ). Je n'ai absolument aucune idée d'où ça se trouve. Je vois du xml, ce qui ne m'arrange pas, je n'y connais rien. :(
Du coup, j'ai tenté de me débrouiller avec ce que j'avais.
Hum oui c'est sûr que là... sinon il y a toujours les sélecteurs du type ".menu > li" pour modifier que les enfants direct.
Et moi non plus je n'ai rien compris à leur système.
Il faut que tu augmentes la portée du l'élément hover pour un li tu peux mettre un padding ou bien mettre en display:block; et un margin si tu as bien un float:left; pour chaque li du menu. Pour Joomla j'ai pas eu l'occasion de l'utiliser mais j'ai déjà vu comment il était construit avec pleins de fichiers css éparpillés un peu partout ouvre la console de développement de Firefox pour retrouver où se situent les css.
Merci pour vos réponses, j'ai déjà qq éléments, je vais tenter de faire avec tout ça. J'ai aussi qq éléments sur joomla ( c'est vraiment vraiment merdique...mais bon passons ^^ )
Xtr3me, j'ai déjà placé un display block sur mes li, et j'ai un margin et padding 0 pour éviter toute marge incongrue, je comprends pas trop comment tu veux que j'augmente la portée du hover.
Pas trop le temps de te répondre clairement mais va voir le site kinapa que j'ai fait j'ai mis en place un menu déroulant. Il faut soit que tu mettes un padding sur le menu déroulé ou soit sur l'élément qui aura la propriété hover ainsi les deux se superposeront de près et le menu ne disparaîtra plus. Le css de kinapa t'en montrera plus.
Merci pour ces solutions, 2b3ez, j'avais fini par arriver à peu près à ça.
il reste 2-3 détails à peaufiner et ça sera parfait :)
Voilà, tout me parait fonctionnel, il ne me reste plus qu'à faire une transitionY du sous menu ( je vais peut-être lutter aussi là dessus mais bon, au pire je posterai un nouveau sujet ^^ )
Merci pour votre aide à tous !
.menu .menu-item .sub-menu a {
color: #fff;
display: block;
line-height: 30px;
text-decoration: none;
height: 30px;
}Tu mets la transition dans ce bout de code là par contre c'est pas top l'utilisation d'autant de classe alors qu'en mettant .sub-menu a tu aurais exactement la même chose ;) . Tu ne fais que ralentir l'affichage du css en y rajoutant des caractères inutiles.