WA4 et Menus LAVALAMP

Bonjour à toutes et à tous,

J'ai posé, il y a quelque années, un sujet concernat une inclusion de mega menu dynamique dans Webacappella.
J'ai supprimer mon site Jeffdulac, pour en remonter Sealex (c'est tout frais).
J'ai trouvé un menu lavaLamp assez sympa, pour l'insérer dans mes maquettes.

Or je n'arrive pas à faire exactement ce que je veux avec.
Je veux faire des sous menus !

Pourtant je sais le faire en codage, mais là bizarrement ça ne fonctionne pas
(des li et des ul, c'est pas compliqué, hé ben si !)

Je pense que ça vient du css, (voir du js), mais pareil je ne vois pas ce qui cloche.
J'ai déjà réussi à ajouter des onglets, bien positionner le menu dans les maquettes.
J'aime bien ce petit indice qui va sur les onglets au survol
Donc je viens chez les Zèbres pour poser ce sujet, qui je pense, ravira les fondus de codage  

Mon menu en test : ICI
Qui risque d'évoluer si je trouve du "bon" code

Merci d'avance

Bonjour Jeff

Grâce à toi je découvre les menus style LavaLamp
Très sympa ton menu J'aime beaucoup.
Dans ce domaine on n’arrêtera jamais d'apprendre et de découvrir des choses sympas.
Et oui tu me donnes de quoi continuer à m'amuser.  

Après une recherche j'ai trouvé ce lien un menu du même style mais qui fonctionne sans javascript, uniquement du css, juste 2 codes à mettre et à modifier selon les besoins.

Pour le faire avec tes images de menu qui vont mieux avec ton design, il y a quelques modifs à faire dans le css car les images ne sont pas de la même taille.

Je te mets le css modifié (pour t'éviter trop de temps sur l'écran, attention les yeux) qui collera avec tes images, pour les détails à mettre au point pas de soucis je sais que tu sauras te débrouiller.
J'ai mis une police Arial mais à toi de voir, c'est quand même celle que je te conseille car sur tablette une police fantaisie est souvent remplacée par Arial et les curseurs risquent de ne plus être au bon endroit, avec Arial pas de soucis elle est prise en charge sur tous les supports.

Code:

<style type="text/css">
#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: url('light.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 49px;
    padding: 0 0 0 0;
    position: relative;
    width: 957px;
 font-family: Arial,sans-serif;
}
#nav ul {
    background-color: #d7d7d7;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#nav li {
    background: url('sep.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#nav li a {
    color: #575757;
    display: block;
    float: left;
    font-weight: normal;
    height: 26px;
    padding: 20px 20px 0;
    position: relative;
    text-decoration: none;
  
}
#nav li:hover > a {
    color: #2c2c2c;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {

    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 46px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#nav ul li {
    background: none;
    width: 100%;
}
#nav ul li a {
    float: none;
}
#nav ul li:hover > a {
    background-color: #e3e3e3;
    color: #2c2c2c;
}
#lavalamp {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 24px;
    position: absolute;
    top: 5px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 24px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 115px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 220px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 340px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 435px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 520px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 615px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 700px;
}
</style>

Si tu mets ce menu dans une maquette on aura le même souci d'arrière plan pour les sous menu que tu avais rencontré avec ton mega menu il faudra donc utiliser la même ruse pour que les sous menus soient au premier plan sur les pages.

@ +

Salut B@byl,

Ah que j'ai bien fait de poser le sujet !

Très sympa ton menu J'aime beaucoup.

Sympa ton appréciation !
Et quel bonheur ta réponse, le code css et tout et tout !
Génialissime sans le js, et aussi beau comme menu.

Si tu mets ce menu dans une maquette on aura le même souci d'arrière plan pour les sous menu que tu avais rencontré avec ton mega menu il faudra donc utiliser la même ruse pour que les sous menus soient au premier plan sur les pages

Ah oui, la fermeture div juste avant !

C'est vrai qu'ils sont pas mal du tout ces "lavaLamp" !

Comme d'hab, toujours aussi réactive et efficace, merci  B@byl  
Je teste cela tout de suite.

Je vais faire attention à mes yeux (avec mes lunettes de soleil ça va mieux)

Bonsoir,

Je me demande si je sais encore coder
Après moultes essais, en jouant avec les class, les id, les ul ou les li, pas moyen de faire des sous-sous menus fonctionnels.


Si tu vois le truc B@byl, ça arrangerai bien mes yeux et mes neurones, je fatigue  

Salut jeff

Ah oui là ça se complique, et je t'avoue que je ne suis pas sure d'y arriver mais je vais regarder de près, mais ce sera après le weekend car il va être très chargé.
c'est le css qu'il faut faire spécialement pour ssubs car il doit forcément être différent de subs menu, si niveau couleur c'est pareil, niveau emplacement ce sera forcément différent par raport à l'emplacement du subs menu.

Je te tiens au courant semaine prochaine

@ +

Hello B@byl,

c'est le css qu'il faut faire spécialement pour ssubs car il doit forcément être différent de subs menu

Bien sûr, c'est d'ailleurs ce que j'ai commencé à faire, mais je vois pas le truc !
Une modif qui a donné une arborescence correcte de sous sous menu,
est d'avoir passé tous les ID en CLASS du css, mais évidement plus de lecture correcte des images.
Donc je suppose que c'est dans cette voie qu'il faut investiguer.

ce sera après le weekend car il va être très chargé

Pas de soucis, comme je t'ai dit "il n'y a pas le feu au sujet"  

Bon weekend B@byl

Bonjour Jeff

De mon côté je n'ai pas réussi à intégrer un 2ème niveau de sous menu à partir de ton css.
Je suis donc repartie d'un menu déroulant 2 niveaux et en lui ajoutant le marqueur et ça marche ici
Seul truc je n'ai pas réussi à placer les séparateurs dans la barre principale sans qu'ils se mettent aussi partout dans les sous menus (pas beau), j'ai donc laissé sans séparateurs.

Code css :

Code:

#menu,#menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;  
 
}

#menu {
    background: url('light.png') no-repeat scroll 0 0 transparent;
  padding:10px;
  margin:5px 0 0 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
  height: 49px;

}

#menu ul {
     background-color: #d7d7d7;
font-size: 12px;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  padding:0;
  margin:10px 0 0 0;
  list-style: none;
  text-align: center;
border-right: 1px black;
 
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative;
}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:5px 10px;
  text-decoration: none;
  color:#575757;
  font-family:arial;
}
#menu ul li a {
  padding:5px 8px;
}
#menu ul {
  position: absolute;
  z-index: 1000;
  min-width:100%;
  white-space: nowrap;
  text-align: left;
}
#menu ul ul {
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  transition: 0.3s all;
}
#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
}
#menu li li li {
  max-height: inherit;
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}





#menu li:hover {
    background-image:none;
}
#menu li:hover a, .menu li li:hover a {

    color:#000
}
#menu li:hover li a, #menu li:hover li li a {
    color: #575757;
  
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {

    color:#000
}

#menu li:hover, #menu a:focus, #menu a:hover, #menu a:active {

    outline: 0 none;
}


#lavalamp {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 24px;
    position: absolute;
    top: 0;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp {
    left: 595px;
}

Code html du menu :

Code:

<ul id="menu">
  <li><a href="#">ACCUEIL</a>
    <ul>
      <li><a href="#">Lien sous menu plus long</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu plus long</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li><!--
--><li><a href="#">GALERIE</a>
    <ul>
      <li><a href="#">FORUM</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">EXPERT JALBUM</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li><!--
--><li><a href="#">EPHEMERIDE</a>
    <ul>
      <li><a href="#">SOMMMAIRE</a>
 <ul>
  
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">MENSUEL</a>
 <ul>
  <li><a href="#">Janvier</a></li>
  <li><a href="#">Fevrier</a></li>
  <li><a href="#">mars</a></li>
  <li><a href="#">Avril</a></li>
  <li><a href="#">Mai</a></li>
  <li><a href="#">Juin</a></li>
  <li><a href="#">Juillet</a></li>
  <li><a href="#">Aout</a></li>
  <li><a href="#">Septembre</a></li>
  <li><a href="#">Octobre</a></li>
  <li><a href="#">Novembre</a></li>
  <li><a href="#">Decembre</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li><!--
--><li><a href="#">ARTISTIQUE</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">LIENS</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">CONTACT</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">PARTAGE</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">INFOS</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
 <ul>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
  <li><a href="#">Lien sous sous menu</a></li>
 </ul>
      </li>
    </ul>
  </li>
  <div id="lavalamp"></div>
</ul>


@ + et bon courage

Bonsoir B@byl,

Wouahhh, génialissime tes codes !
Exactement ce que je cherchais.

Comme finalement je n'aurai pas trop de 2 niveaux, ça va sacrément me faciliter la vie (et la vue...).
Et plus tard, le css, en place, me permettra d'enrichir ce menu quand j'en aurai besoin.

Seul truc je n'ai pas réussi à placer les séparateurs dans la barre principale sans qu'ils se mettent aussi partout dans les sous menus (pas beau), j'ai donc laissé sans séparateurs

Aussi sympa sans les séparateurs, je m'en passerai

Merci B@byl  

Je te décerne un zèbre d'or pour ta gentillesse

Bonjour Jeff

Wouahhh!!!!!!!
Merci pour le zèbre d'or
Contente que ça te convienne.

Sinon, pour ton menu actuel dans ton site, si je ne me trompe pas il n'est pas placé dans une maquette, mais sur chaque page pour avoir le curseur sur l'onglet de la page active, c'est bien ça ?

@ +

Hello B@byl,

mais sur chaque page pour avoir le curseur sur l'onglet de la page active, c'est bien ça ?

Oui exactement ça, dans les maquettes (attribut current) pour chaque page active
(obligé de faire comme cela sinon l'index en "current" ne fonctionne pas)

La même chose est à faire avec la formule css.
Comme je faisais mes essais sur une seule page je n'avais pas vu le problème du curseur en page courante.

Nous avons donc des petites modifs dans les codes pour que le curseur aie pleinement toute son utilité.
On va commencer par le code html, là ce ne sera pas le current qu'il faudra modifier pour chaque onglet mais la balise div qui se trouve tout en bas du code html:

Code:

<div id="lavalamp"></div>

et du coup pour chaque onglet, onglet 1 on remplacera par :

Code:

<div id="lavalamp1"></div>

onglet 2 :

Code:

<div id="lavalamp2"></div>

et ainsi de suite jusqu'à l'onglet 8.

Et bien sur comme pour ce que tu avais déjà fait, chacune des maquettes serviront pour tous les sous menus qui découleront de chaque onglet
çà c'est pour le code html

Maintenant on va passer au css
Pour le code css il y a le css de chaque lavalamp de 1 à 8 à ajouter.
Ce qui nous donnera (je mets le css complet c'est plus sur) :

Code:

#menu,#menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;  
 
}

#menu {
    background: url('light.png') no-repeat scroll  transparent;
  padding:10px;
  margin:5px 0 0 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
  height: 49px;

}

#menu ul {
     background-color: #d7d7d7;
font-size: 12px;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  padding:0;
  margin:10px 0 0 0;
  list-style: none;
  text-align: center;
border-right: 1px black;
 
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative;
}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:5px 10px;
  text-decoration: none;
  color:#575757;
  font-family:arial;
}
#menu ul li a {
  padding:5px 8px;
}
#menu ul {
  position: absolute;
  z-index: 1000;
  min-width:100%;
  white-space: nowrap;
  text-align: left;
}
#menu ul ul {
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  transition: 0.3s all;
}
#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
}
#menu li li li {
  max-height: inherit;
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}

#menu li:hover {
    background-image:none;
}
#menu li:hover a, .menu li li:hover a {

    color:#000
}
#menu li:hover li a, #menu li:hover li li a {
    color: #575757;
  
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {

    color:#000
}

#menu li:hover, #menu a:focus, #menu a:hover, #menu a:active {

    outline: 0 none;
}

/*********lavalamp******/
/***********************/
#lavalamp1 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 24px;
    position: absolute;
    top: 0;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp1:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}

#menu li:nth-of-type(1):hover ~ #lavalamp1  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp1  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp1  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp1  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp1  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp1  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp1  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp1  {
    left: 595px;
}
/****************/
#lavalamp2 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 100px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp2:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp2  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp2  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp2  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp2  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp2  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp2  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp2  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp2  {
    left: 595px;
}
/**************/
#lavalamp3 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 190px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp3:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp3  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp3  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp3  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp3  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp3  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp3  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp3  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp3  {
    left: 595px;
}
/************/
#lavalamp4 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 290px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp4:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp4  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp4  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp4  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp4  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp4  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp4  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp4  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp4  {
    left: 595px;
}
/************/
#lavalamp5 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 370px;
    position: absolute;
    top: 0;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp5:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp5  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp5  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp5  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp5  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp5  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp5  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp5  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp5  {
    left: 595px;
}
/****************/
#lavalamp6 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 440px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp6:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp6  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp6  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp6  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp6  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp6  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp6  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp6  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp6  {
    left: 595px;
}
/**************/
#lavalamp7 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 525px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp7:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp7  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp7  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp7  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp7  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp7  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp7  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp7  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp7  {
    left: 595px;
}
/************/
#lavalamp8 {
    background: url('darkred.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 595px;
    position: absolute;
    top: 0;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp8:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#menu li:nth-of-type(1):hover ~ #lavalamp8  {
    left: 24px;
}
#menu li:nth-of-type(2):hover ~ #lavalamp8  {
    left: 100px;
}
#menu li:nth-of-type(3):hover ~ #lavalamp8  {
    left: 190px;
}
#menu li:nth-of-type(4):hover ~ #lavalamp8  {
    left: 290px;
}
#menu li:nth-of-type(5):hover ~ #lavalamp8  {
    left: 370px;
}
#menu li:nth-of-type(6):hover ~ #lavalamp8  {
    left: 440px;
}
#menu li:nth-of-type(7):hover ~ #lavalamp8  {
    left: 525px;
}
#menu li:nth-of-type(8):hover ~ #lavalamp8  {
    left: 595px;
}
/****************************/
/*********fin lavalamp*******/

Je te remets un lien d'essai complet ici où tout y est tu pouras toujours voir le code source si ça t'est utile.

Punaise ça c'est du codage de compétition !
Merci beaucoup B@byl

Iou ou !
Je crois avoir trouvé une astuce pour les séparateurs.
Tu me dis ce que tu en penses
Bon je dois revoir tous les positionnements du curseur, mais ça devait marcher

Salut Jeff
Ah oui bonne idée de mettre les séparateurs directement dans le menu.

Salut B@byl,

Merci
Et du coup j'ai refait tous les positionnements du curseur.
Et aussi une image entièrement refaite avec photofiltre, pour la barre elle même.
Ça va être sympa comme cela.

Hello B@byl,

A y est il est pratiquement  totalement en place
J'ai même re-installé mon bon "vieux" livre d'or"
Par contre je n'arrive pas à résoudre le problème des caractères accentués pour ce menu

Mais bon, ça le fait bien ce menu Lavalamp !

Salut jeff

Bien, bon boulot

Pour les accents il y a 2 façons de les coder en html ou décimal, tu as essayé les 2 ?

Salut B@byl,

En html, oui (et c'est pareil), en décimal idem
(sur la page test j'ai d'ailleurs essayé en décimal pour le premier É, et en iso pour les deux autres)  !

Tu fais comment, en particulier, pour ce genre de menu ?  

Salut Jeff

Je suis allée voir sur le lien test que tu donnes mais pas vu d'accent codé dans le code source.

@ +

Salut B@byl,

Je ne comprends plus rien, j'ai mis ces codes hier soir, et aujourd’hui plus rien !

De mon côté ton menu je le vois comme ça :


Ton code source comme ça :

tu as laissé le 1er é non codé le 2ème en lettre pas fait en numérique.

Mon menu chez moi je le vois comme ça c'est ici:


Mon code source :

le 1er non codé le 2ème en lettre et le 3ème en numérique

Et je les vois tous avec l'accent, navigateur firefox 46.0.1
Tu publies bien directement avec WA ?

Oui parce qu'en décimal, ça donne rien du tout (comme si il n'avait aucun caractère)
En fait , ce que tu vois je l'ai repris cet après midi.
J'ai mis seulement en codage html, et en "normal" pour voir.
Mais pour moi ça donne pareil ... rien, nada, que tchi, aucune lettre.

Tu fais comment pour que l'on voit les accents ?

Tu publies bien directement avec WA ?

oui bien sûr.
Je viens de faire pareil que toi, et toujours rien.

Tu as fait quelque chose de particulier en css (je vois pas) ?

Moi non je n'ai rien fait de spéciale dans le css mais toi si, tu as au début de ton css ceci :

Code:

@charset "utf-8";
/* latin-ext */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

Tu devrais retirer toute cette partie et réessayer, n'oublie pas de vider le cache avant de vérifier ce que ça donne.

Salut Babyl,

J'avais mis ce supplément de code trouvé sur le net, pour essayer de résoudre le problème, et j'ai oublié de l’ôter !
Évidement ça ne fonctionnait pas

Salut Jeff
Vraiment curieux cette histoire d'accents et quand tu regardes en teste autrement dit en local est ce que tu as aussi le problème ?

C'est ce que je me dis !
En local, j'ai reproduit ton test, c'est nickel, mais en ligne, publié avec WA, ça ne fonctionne plus, bizarre quand même

Hello Jeff

Jeffdulac a écrit:
En local, j'ai reproduit ton test, c'est nickel 

Je suppose que tu as reproduit sur un fichier vierge

Mais dans wa qu'est ce que ça donne si tu cliques sur le bouton tester ?
Est ce que ça ne viendrait pas de l'hébergement ?

Edit : Ah j'oubliais, c'est quoi ta police, c'es bien Arial ? Car il y a des polices dont les caractères accentués n'existent pas et donc même codé tu n'auras rien.

@ +

Coucou B@byl,

Mais dans wa qu'est ce que ça donne si tu cliques sur le bouton tester ?

Pas grand chose, car le menu n'est visible qu'en ligne.

Je suppose que tu as reproduit sur un fichier vierge

Oui en fichier extra WA !
Oui c'est bien arial, car j'ai repris exactement ton menu et ton css !

Une piste, regardes bien ce qu'il se passe quand tu actualises la page de test,
c'est vraiment étrange, je vois le menu avec accents en premier, et fin d'actualisation, sans accents !



C'est dingue ce truc !

Bon bah je crois que j'ai trouvé !
En fait il faut intégrer le lien css et la meta charset dans le code du menu,
et non dans les propriété du site web de WA !

Par contre je n'arrive pas à l'actualiser avec Firefox, cache vidé et actualisation forcée (CTRL + F5)
(avec EDGE c'est nickel !)

EDIT:17h00
Et bah pas tout à fait !
Le menu passe sous la page
Pourtant j'ai appliqué l'astuce de la div.
Et toujours Firefox impossible à actualiser.

Euh oui mais pas sure que ça règle le problème, d'autant plus que c'est contraire aux normes on ne met jamais de balise metta ou link dans le body, elles doivent être impérativement dans le head.

autrement pour le problème de fichiers qui ne s'actualisent pas c'est courant, ça actualise la page mais pas les fichiers appelés, à croire qu'ils ne sont pas dans le même cache ou qu'il ne vide que les pages.
Il y a un truc efficace pour ça, il faut suffixer l’appel du fichier en question par exemple pour ton css :
tu as mis :

Code:

<link href=".../styles/cssmenu.css" rel="stylesheet" type="text/css" />

il faudra mettre un suffixe (un nom de version de ton fichier), en exemple j'ai mis la date et l'heure de maintenant mais tu peux mettre ce que tu veux le principe est de changer ce nom quand tu modifies pour que ton navigateur n'utilise pas le cache mais aille chercher la nouvelle version sur le serveur
Ton appel actuel deviendra celui-ci :

Code:

<link href=".../styles/cssmenu.css?v06071706" rel="stylesheet" type="text/css" />

v06071706 est le nom du suffixe du fichier ( nom de version) il ne faut pas oublier le ? entre le nom de fichier et le nom du suffixe.
Ensuite à chaque fois que tu changes ton css tu changes le suffixe dans l'appel du fichier, ton navigateur sera obligé d'aller le chercher sur le serveur.
par contre pour le nom de ton fichier tu ne changes rien lui il s'appellera toujours cssmenu.css

En espérant être claire pour cette "astuce"

Par contre comme tu multiplies l'appel de fichier dans hesad et dans body par sure que ça marche, mais utilisé normalement ça marche impeccable.
Ça vaut aussi pour l'appel de fichiers JS.

EDIT:17h00
Et bah pas tout à fait !
Le menu passe sous la page Sad
Pourtant j'ai appliqué l'astuce de la div.
Et toujours Firefox impossible à actualiser

N’hésites pas à ajouter des zeros pour ton z-index mais plutôt 200000 ton body est déjà a 52000
et tes 2 balises meta et link dans une balise body c'est pas vraiment une bonne idée, mais bon ...

Mon dieu c'est le z-index tout simplement !
Merci B@byl !
Pour les meta et charset, si je les enlève plus d'accents.

Salut Jeff

Moi je n'ai toujours pas tes caractères accentués, le problème est toujours là.
De toutes façons il y a un soucis qui vient surement des codes ou plugins ajoutés, il n'y a pas de raisons ça marche chez moi en codant normalement ça doit aussi marcher chez toi, je regarde ça un de tes codes ou plugin est la cause de ce bug il faut trouver l’intrus .

Edit :
J'ai reproduit ta page, intrus trouvé c'est un de tes plugins (myriad.js) parmis ceux qui ne servent plus à rien puisqu'on n'utilise plus le menu que tu avais mis au départ.
Il faut que tu fasses du nettoyage, retirer tous ces appels de fichiers inutiles qui risquent de provoquer d'autre conflits.

Dans propriétés du site tu remplaces par le code ci-dessous et rien de plus les autres codes ne servent plus à rien avec ton menu actuel

Code:

<meta name="google-site-verification" content="xRgoyyNyeUB1l2SSpgyMAYjPY5uqOTRLa7n4DXLRWzY" />
<link href="http://www.sealex.fr/styles/cssmenu.css?v06080900" rel="stylesheet" type="text/css" />

<style type="text/css">
* {
outline:none; }

body {
overflow:auto;
}
</style>

et dans le code du menu retire les deux balises, la meta et la link tu ne devrais plus en avoir besoin.
Normalement tout doit être rentré dans l'ordre tes accents devraient s'afficher pour tout le monde.

Re Edit: Le myriad js est un fichier pour une police qui est sans accent et qui prenait le dessus par rapport au css c'est pourquoi tu voyais les accents pendant le chargement et plus après, tans que le JS n'était pas chargé tu voyais ton css avant qu'il ne soit écrasé par le js.
J'avais bien remarqué que ta police était différente de arial, du coup tu auras à replacer tes curseurs en fonction de Arial

@ +

Salut B@byl,

RÔÔÔÔÔÔHHHHHH !
Superbe et absolument géniale cette réponse !

Effectivement tout est rentré dans l'ordre.

Merci beaucoup B@byl

Merci Jeff
Super je vois que tout marche normalement maintenant
Allez un petit café italien pour se récompenser

@ +

Mouais, super, mais cela me rappelle un café payé 15 euros sur la place St Marc à Venise ...
Biz B@byl