27613 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

En cherchant à droite et à gauche sur Internet j'ai trouvé un code HTML qui permettait d'afficher dans un menu déroulant des sous menus et ce sur deux niveaux.

Néanmoins, je souhaiterais rajouter un troisième niveau pour affiner encore plus la recherche fais par l'utilisateur. Mais je coince au niveau du code. Pas au niveau HTML car ma liste est bonne mais au niveau du CSS et de la mise en place de .hover et display. J'arrive à le faire pour le second niveau mais mon cerveau explose pour le troisième au niveau des balises <li> et <ul>.

Je n'arrive pas à afficher mon troisième niveau au survol, il n’apparaît même pas du tout Smiley decu

Je vous joint le code en dessous, si une ame charitable peut éclairer mon cerveau cela serait super Smiley smile

Bonne journée

html,body {
  padding:0;
  margin:0;
  height:100%;
}
#menu, #menu ul {
  padding:0;
  margin:0;
  list-style: none;
  text-align: center;
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative;
}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:5px 50px;
  text-decoration: none;
  color:#fff;
  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;
}

/* background des liens menus */
.Europe {
background-color: #65537A;
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
.Europe li {
    background:#2A2333
}
.Europe li:hover {
    background:#65537A
}


Et le code HMTL qui lui est dédié Smiley smile
<body>
<ul id="menu">
	<!-- Menu déroulant Europe -->
  <li class="Europe"><a href="#">Europe</a>
    <ul>	
	  <li><a href="#">Benelux</a>
		<ul>
		  <li><a href="#">Technical Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		  <li><a href="#">Commercial Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		  <li><a href="">Others Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		</ul>
      </li>
	  <li><a href="#">Croatia</a>
		<ul>
		  <li><a href="#">Technical Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		  <li><a href="#">Commercial Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		  <li><a href="#">Others Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		</ul>
      </li>	  
      <li><a href="#">France</a>
				<ul>
		  <li><a href="#">Technical Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		  <li><a href="#">Commercial Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		  <li><a href="#">Others Request</a></li>
			<ul>
				<li><a href="#">Revendeur</a></li>
				<li><a href="#">Atelier</a></li>
			</ul>
		</ul>
      </li>	 
	  </ul>
   </li>     
</ul> 
</body>


Voila en image le problème Smiley smile
upload/1630487255-83521-niveaumanquant.png
Modifié par PtitNoxy (01 Sep 2021 - 11:08)
Modérateur
Bonjour,

En fait ta liste est invalide , il y a des ul qui sont frere des li dans lesquelles elle devraient - être.

Correction de ta structure d'ul imbriquées:
<ul id="menu">
  <!-- Menu déroulant Europe -->
  <li class="Europe"><a href="#">Europe</a>
    <ul>
      <li><a href="#">Benelux</a>
        <ul>
          <li><a href="#">Technical Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
          <li><a href="#">Commercial Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
          <li><a href="">Others Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Croatia</a>
        <ul>
          <li><a href="#">Technical Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
          <li><a href="#">Commercial Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
          <li><a href="#">Others Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">France</a>
        <ul>
          <li><a href="#">Technical Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
          <li><a href="#">Commercial Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
          <li><a href="#">Others Request</a>
            <ul>
              <li><a href="#">Revendeur</a></li>
              <li><a href="#">Atelier</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>


Ensuite pour faire ton menu déroulant , je te conseillerais de t’attacher à faire juste la partie qui montre/cache tes sous listes en premier lieu.

par exemple :
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  background: lightgray;/* pour mieux les voir*/
}

#menu {
  position: relative;
  width: 10em;/* ou max-content*/
  margin: auto;
}
#menu ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0px;
}
#menu li {
  position: relative;
}
#menu li:hover > ul {/* on ne montre que la liste enfant direct */
  display: block;
}

et enfin , si ça marche, tu peut compléter avec tes styles pour éviter toutes confusions entre les deux et surtout voir si tu n'injecte pas une règle incompatible avec celles qui gèrent le déroulement du menu:
#menu a {
  display:block;
  padding:5px 50px;
  text-decoration: none;
  color:#fff;
  font-family:arial;
}
#menu ul li a {
  padding:5px 8px;
}

#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
}

#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}

 
.Europe {
background-color: #65537A;
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
.Europe li {
    background:#2A2333
}
.Europe li:hover {
    background:#65537A
}


En principe en partant d'une structure HTML valide , puis en faisant les styles par étapes distinctes, tu devrais t'en sortir et apprendre plus facilement.

Un exemple possible de ton menu en recalant aussi les coordonnées des sous menus https://jsfiddle.net/4epjnqok/

Cdt
Modifié par gcyrillus (01 Sep 2021 - 13:03)
Meilleure solution
Bonjour gcyrillus,

Merci énormément pour la réponse précise et complète que vous m'avez apporté.

Cela correspond à 99% à ce que je souhaitais, je n'ai plus qu'à mettre le premier niveau en vertical et ça sera parfait mais je n'y arrive pas.

C'est bizarre, les menus s'alignent de manière aléatoire à droite et à gauche Smiley decu

Merci encore Smiley smile
Modifié par PtitNoxy (01 Sep 2021 - 13:59)
Je me permets d’ajouter un point: hover n’a de sens que pour les appareils avec curseur (souris ou touchpad) un mécanisme qui ne marche pas sur tablette ou téléphone c’est un handicap pour la consultation du site.
Commence par te poser la question de ce que tu veux faire sur un téléphone et une tablette avant de te lancer dans un menu à trois niveaux qui ne pourra fonctionner que sur un ordinateur
PapyJP a écrit :
Je me permets d’ajouter un point: hover n’a de sens que pour les appareils avec curseur (souris ou touchpad) un mécanisme qui ne marche pas sur tablette ou téléphone c’est un handicap pour la consultation du site.
Commence par te poser la question de ce que tu veux faire sur un téléphone et une tablette avant de te lancer dans un menu à trois niveaux qui ne pourra fonctionner que sur un ordinateur


Il n'y a normalement pas de tablette ou smartphone qui se connecteront à ce site (étant en interne du réseau de l'entreprise) et l'accès est filtré ; A moins que mon chef me réserve une dernière surprise de derrière les fagots cela ne devrai pas poser de problème.

Mais merci de la précision Smiley smile
Modérateur
PtitNoxy a écrit :
Bonjour gcyrillus,
...
C'est bizarre, les menus s'alignent de manière aléatoire à droite et à gauche Smiley decu
...


Bonjour, tu parles surement du fiddle que j'ai ajouté en exemple . Il y a ce petit morceau de CSS en sus qui évite de voir les sous menus disparaitre à droite dans la démo, il suffit de l'enlever et de faire tes réglage comme tu le souhaite.
#menu ul ul {
  left:auto;
  right:100%
}

Cdt
gcyrillus a écrit :


Bonjour, tu parles surement du fiddle que j'ai ajouté en exemple . Il y a ce petit morceau de CSS en sus qui évite de voir les sous menus disparaitre à droite dans la démo, il suffit de l'enlever et de faire tes réglage comme tu le souhaite.
#menu ul ul {
  left:auto;
  right:100%
}

Cdt


Bonsoir,
Merci pour le tuyau, cela fonctionne de manière plus du tout aléatoire maintenant Smiley smile
Je n'ai plus qu'à mettre le premier sous menu en dessous du menu et cela sera nickel.

Merci encore pour les conseils et l'assistance ^^
Re bonjour,

Je suis vraiment désolé de vous embéter encore avec ce problème.

Je souhaiterais que les menus soit alignés horizontalement comme ceci :
upload/1630569732-83521-2021-09-0210h0133.png

Je sais bien que ce n'est pas hyper pratique mais c'est la solution que je dois malheureusement mettre en place.

La solution que vous m'avez indiqué (qui est super bien) met les menus principaux les uns en dessous des autres. Or j'aimerais qu'ils soient alignés horizontaux, que le sous menu soit vertical et que les sous sous menus soient horizontaux. Pensez vous que c'est possible ?

Ces balises de CSS vont me rendre dingue Smiley eek Smiley eek
Modérateur
bonjour,

Le menu à changer de visuel Smiley smile
Le placement des sous menu en absolute , peuvent toujours se faire via les coordonnées, top,left,bottom,right. Cependant, elle se feront en fonction du dernier parent positionné (relative/absolute/fixed ... pas static qui est la valeur par défaut).
Le code que tu as au début du poste fera que les coordonnées seront calculer à partir du UL parent ,
le premier sous menu(2eme niveau) se cale en fonction de #menu qui est en position:relative,
puis le second sous menu (3eme niveau) se cale en fonction du premier sous menu en position:absolute.

Pour positionner les sous menu en prenant le LI dans lequel il se trouve, il te suffit de faire li {position:relative;} pour calculer les coordonnées à partir du li survolée.

Est ce un peu plus clair ? Smiley smile

Cdt
gcyrillus a écrit :
bonjour,

Le menu à changer de visuel Smiley smile
Le placement des sous menu en absolute , peuvent toujours se faire via les coordonnées, top,left,bottom,right. Cependant, elle se feront en fonction du dernier parent positionné (relative/absolute/fixed ... pas static qui est la valeur par défaut).
Le code que tu as au début du poste fera que les coordonnées seront calculer à partir du UL parent ,
le premier sous menu(2eme niveau) se cale en fonction de #menu qui est en position:relative,
puis le second sous menu (3eme niveau) se cale en fonction du premier sous menu en position:absolute.

Pour positionner les sous menu en prenant le LI dans lequel il se trouve, il te suffit de faire li {position:relative;} pour calculer les coordonnées à partir du li survolée.

Est ce un peu plus clair ? Smiley smile

Cdt


Merci pour l'explication Smiley smile