Bonjour à tous !
J'ai créé un menu sous Wordpress 3.5.2 et j'utilise le thème "Canyon".
Je me heurte à deux problèmes :
1) dans mon sous-menu (niveau 2), il n'y a pas de redimensionnement automatique du bloc en fonction de la taille du texte et le texte est donc coupé. J'ai vu que dans le css, un "width" est défini ; seul problème, si je l'augmente, il sera donc appliqué à tous les sous menus donc la zone sera beaucoup trop grande pour des textes courts.
En images : ici le "projet de développement de la Ligue" est coupé :
J'ai essayé de mettre un width : 100% mais tous les éléments se mettent les uns à la suite des autres.
Voici le code CSS correspondant au menu :
2) Comme vous le voyez sur l'image ci-dessus, j'ai mis une petite flèche peu esthétique sur l'élément "structure" du sous-menu que j'ai ajoutée à la main dans le titre du menu, parce qu'il y a un menu de niveau 3 ensuite.
J'ai eu beau chercher, je n'ai pas trouvé comment faire en sorte qu'une flèche apparaisse (sur le coté droit) de manière automatique dès lors qu'il y a un menu de niveau 3. En gros, que ça fasse comme ça :
J'imagine que c'est du php ? J'ai essayé d'utiliser la fonctionnalité wordpress "Classes CSS (facultatives)" pour le faire à la main mais ça ne fonctionne pas (aucune classe n'est associé au titre en question).
Voila voila, je bloque ! Merci d'avance si vous avez des idées
J'ai créé un menu sous Wordpress 3.5.2 et j'utilise le thème "Canyon".
Je me heurte à deux problèmes :
1) dans mon sous-menu (niveau 2), il n'y a pas de redimensionnement automatique du bloc en fonction de la taille du texte et le texte est donc coupé. J'ai vu que dans le css, un "width" est défini ; seul problème, si je l'augmente, il sera donc appliqué à tous les sous menus donc la zone sera beaucoup trop grande pour des textes courts.
En images : ici le "projet de développement de la Ligue" est coupé :
J'ai essayé de mettre un width : 100% mais tous les éléments se mettent les uns à la suite des autres.
Voici le code CSS correspondant au menu :
#botmenu {
height: 30px;
margin: 0px auto;
background: url(images/menubg.png) repeat-x;
}
#submenu {
margin: 1px auto;
width: 100%;
height: 30px;
padding: 0px 14px;
}
#submenu ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0 0px;
}
#submenu li {
float: left;
list-style: none;
margin: 0px 1px 0px 0px;
padding: 0px;
color: #656565;
font-size: 13px;
font-family: Helvetica,Tahoma,Century gothic,sans-serif;
font-weight: 600;
text-transform:uppercase;
height: 30px;
cursor: default;
}
#submenu li span.menudescription{
display:block;
font-size:10px;
line-height:14px;
color:#fff;
font-family:Arial, verdana, Tahoma, Sans-serif;
}
#submenu li a {
color: #2C517F;
display: block;
margin: 0;
padding: 7px 15px 5px 0px;
text-decoration: none;
position: relative;
}
#submenu li a:hover, #submenu li a:active {
color: #656565;
}
.testtest { color:red; }
#submenu li a.sf-with-ul {
padding-right: 10px;
}
#submenu li .sf-sub-indicator{
display:none;
}
#submenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
width: 160px;
margin: 5px 0px 0px 0px;
padding: 5px 5px;
background: rgba(42, 82, 124, .9);
border: 1px solid white;
}
#submenu li ul li:hover {
background: rgba(0, 0, 0, .5);
}
#submenu li ul li a, #submenu li ul li a:link, #submenu li ul li a:visited {
color: #ddd;
text-shadow:1px 1px 0px #890519;
font-size:11px;
text-shadow:none;
width: 150px;
margin: 0;
padding: 0px 5px;
line-height:35px;
height:35px;
text-transform: none;
position: relative;
}
#submenu li ul li a:hover, #submenu li ul li a:active {
background:transparent;
color: white;
}
ul.sub-menu li a{
//border-bottom:1px solid #04515B;
}
#submenu li ul a {
width: 150px;
}
#submenu li ul a:hover, #submenu li ul a:active {
color: #fff;
}
#submenu li ul ul {
margin: -41px 0 0 165px;
}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
left: -999em;
}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
left: auto;
}
#submenu li:hover, #submenu li.sfHover {
position: static;
}2) Comme vous le voyez sur l'image ci-dessus, j'ai mis une petite flèche peu esthétique sur l'élément "structure" du sous-menu que j'ai ajoutée à la main dans le titre du menu, parce qu'il y a un menu de niveau 3 ensuite.
J'ai eu beau chercher, je n'ai pas trouvé comment faire en sorte qu'une flèche apparaisse (sur le coté droit) de manière automatique dès lors qu'il y a un menu de niveau 3. En gros, que ça fasse comme ça :
J'imagine que c'est du php ? J'ai essayé d'utiliser la fonctionnalité wordpress "Classes CSS (facultatives)" pour le faire à la main mais ça ne fonctionne pas (aucune classe n'est associé au titre en question).
Voila voila, je bloque ! Merci d'avance si vous avez des idées
quelqu'un pour filer un coup de main en me donnant le code ?