Personnalisation du menu

Personnalisation du menu [Réglé]

Visiteur

Boosteur Inactif

Le 17/03/2015 à 12h06

Bonjour,

Je m'adresse à vous aujourd'hui en espérant trouver de l'aide, car bien que mon thème se finalise petit à petit et que mes connaissances en html/css/php évolue en même temps (et c'est aussi grâce à vous !), je n'arrive pas à m'en sortir en ce qui concerne l'intégration du CSS de mon menu dans les menu dynamiques horizontaux déroulants. Quoique je fasse, ça pose problème quelque part.

Voici mon css si quelqu'un trouve le temps de m'aider

Code CSS :

/* menu perso */
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  background: #000000;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -o-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #000000 100%);
  background: linear-gradient(to bottom, #26262c 0%, #000000 100%);
  width: 1000px;
}
 
 
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: inline-block;
  clear: both;
}
#cssmenu a {
  background: #000000;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -o-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #000000 100%);
  background: linear-gradient(to bottom, #26262c 0%, #000000 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  color: #ffffff;
  font-size: 12px;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #046380;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #000000;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #070707 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #070707), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #070707 0%, #000000 100%);
  background: -o-linear-gradient(top, #070707 0%, #000000 100%);
  background: -ms-linear-gradient(top, #070707 0%, #000000 100%);
  background: linear-gradient(to bottom, #070707 0%, #000000 100%);
}
#cssmenu > ul > li:hover > a {
  background: #000000;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #070707 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #070707), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #070707 0%, #000000 100%);
  background: -o-linear-gradient(top, #070707 0%, #000000 100%);
  background: -ms-linear-gradient(top, #070707 0%, #000000 100%);
  background: linear-gradient(to bottom, #070707 0%, #000000 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 4;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #045380;
  border-bottom: 1px dotted #044380;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
  background: #043380;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #043380;
  border-bottom: 1px dotted #046380;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #041380;
}
/* Fin menu perso */
 
/* Mascotte */
.mascotte {
float:right;
}
/* FIN Mascotte */

babsolune Membre non connecté

Equipe Développement Administrateur

Le 17/03/2015 à 20h57

#143877

alors... j'ai fait que pour le menu dans le sous en-tete

global.css vers la ligne 557 (pour le theme de base)

Code CSS :

/* --- Menu Horizontal - Scrolling --- */
ul.horizontal-scrolling-menu li {
display: block;
padding: 0;
}

à remplacer par

Code CSS :

/* --- Menu Horizontal - Scrolling --- */
div#sub-header nav.dynamic-menu{
position: relative;
width:100%;
height: 49px;
  background: #000000;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -o-linear-gradient(top, #26262c 0%, #000000 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #000000 100%);
  background: linear-gradient(to bottom, #26262c 0%, #000000 100%);
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
 
div#sub-header nav.dynamic-menu:after{
content: url(images/cerf-menu.png);
position: absolute;
right:0;
top:0;
}
 
div#sub-header nav.dynamic-menu li:first-child.first-level{
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
}
 
div#sub-header nav.dynamic-menu li:last-child.first-level{
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
 
div#sub-header nav.dynamic-menu li:hover.first-level {
background: #000000;
position: relative;
}
 
div#sub-header nav.dynamic-menu li:hover.first-level:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #046380;
  margin-left: -10px;
}
 
div#sub-header nav.dynamic-menu li a,
div#sub-header nav.dynamic-menu li span {
padding: 0 20px;
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 49px;
color: #ffffff;
}
 
div#sub-header nav.dynamic-menu li ul {
background: #046380;
border: none;
border-radius: 0;
padding: 0;
width: 200px;
}
 
div#sub-header nav.dynamic-menu li li a,
div#sub-header nav.dynamic-menu li li span {
line-height: 35px;
}
 
div#sub-header nav.dynamic-menu li li a:hover,
div#sub-header nav.dynamic-menu li li span:hover {
background: #043380;
}