28172 sujets

CSS et mise en forme, CSS3

Sous menu

Bonjour,

Je suis entrain de finaliser un sous menu. J'aimerai que lorsque le sous-menu apparait lors du survol avec la souris il passe en dessous du border de mon menu et non qu'il mange la moitié de mon header. J'arrive pas à trouver la solution.
Voici l'exemple que je veux, comme le sous menu de "edition":
https://editions-fournel.fr/

	<header>
		<nav>
			<div class="navigation">
	          	<a href=""><img src="assets/images/Logo.png"></a>
	        	<input type="checkbox" id="menu-checkbox" class="menu-checkbox">
				<label for="menu-checkbox" class="menu-toggle">
					<span></span>
					<span></span>
					<span></span>
				</label>
	        	<ul class="nav-menu">
				<li><a href="">Accueil</a></li>
	        		<li><a href="">Studio</a></li>
	        		<li><a href="">Archive-Services</a></li>
	        		<li><a href="">Services</a></li>
	        		<li><a href="">Contact</a></li>
	        	</ul>
	        </div>
		</nav>
	</header>


header{
  @extend %head;
  background: white;
  position: fixed;
  right: 0;
  left: 0;
  z-index:22;
  border-bottom: 1px solid #ededed;
    nav{
      .navigation{
        display: flex;
        justify-content: space-between;
        align-items: center;
          .menu-checkbox{
            display: none;
          }
          .menu-toggle{
            display: none;
          }
          img{
            width: 120px;
          }
          .nav-menu{
            li{
              display: inline-block;
              margin: 0 1em 0 0;
              font-size: 0.95em;
              text-transform: uppercase;
              font-weight: 600;
                a{
                  padding-bottom: 1em;
                  transition: 0.5s;
                    &:hover{
                      opacity:0.6;
                      transition: 0.5s;
                    }
                }
            }
          }
      }
    }
}

.nav-menu ul ul{
  position:absolute; 
  display: none; 
  background: white;
  border: 1px solid #9e9e9e;
  border-top:1px solid white;
  z-index: 22;
  margin-top: 12px;
    li{
      display: block; 
      margin: 0!important;
      float: none;
      font-size: 17px;
      border-bottom: 1px solid $border-menu;
    }
    a{ 
      display: block;
      padding: 1em 0.6em; 
      color:black;
      transition: all 0.3s;
      position: relative;
        &:after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: white;
          z-index: -2;
        }
        &:before{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0%;
          height: 100%;
          background-color: darken(black, 15%);
          transition: all .3s;
          z-index: -1;
        }
        &:hover{
          color:white;
          opacity: 1!important;
            &:before{
              width: 100%;
            }
        }   
    }
}

.nav-menu ul li:hover > ul{
  display:flex;
  flex-direction: column;
}

.header-title{
  @extend %title-section;
}

Modifié par tc-web (12 Oct 2020 - 18:12)
Modérateur
Bonjour,

Je me suis dit, bon, j'essaie de répondre à la question vu l'effort fait de poster un code d'exemple.

Sauf que ça fait plus d'un quart d'heure que j'essaie de faire marcher ce code (juste pour voir ce qui ne va pas), et que je ne suis toujours pas rendu !

Il faudrait faire un code qui marche et qui montre ce qui ne va pas !

1) Il est où le sous-menu ? il a quoi comme balise ? il a quoi comme classe ?
2) C'est en quel langage le style ? (du css pur serait mieux, d'autant plus que le code que tu fournis semble ne pas passer à la compilation, sauf si je n'ai pas essayé avec le bon compilateur, ce qui serait tout moi Smiley lol ).

Amicalement,
Modérateur
Bonjour,

Bon, j'ai fini par faire marcher ce code.

1) pour la compilation du css, il y avait finalement juste une variable représentant une couleur qui faisait échouer le truc. J'ai mis une couleur en dur à la place de la variable.

2) après compilation, on obtient plein de sélecteurs tel que celui ci-dessous :
.nav-menu ul ul {

Or nav-menu est la classe d'un ul, pas la classe d'un parent d'un ul.

Il y a donc dans le code en scss (je faisais l'idiot mais je savais très bien ce que c'était, même si je n'utilise jamais ce truc) une erreur qui produit ce sélecteur. Il faudrait modifier ça pour produire à la place :
ul.nav-menu ul {


3) j'ai rajouté un sous-menu puisqu'il n'y en avait pas, sans classe, et sous forme d'un <ul> avec 3 <li> contenus dans un <li> du menu principal.

Après ça, on obtient une démo qui montre effectivement que le sous-menu mange la moitié de la hauteur du header. Normal, puisqu'il est juste en dessous du <li> du menu principal qui le contient.

Après, on peut enfin commencer à répondre à la question. Il suffit de rajouter dans le css :
ul.nav-menu ul {top: calc(100% - 12px);}

Ceci a pour effet de mettre le sous-menu en dessous du bord du haut du header à une distance 100% de la hauteur du header moins les 12px de margin-top qu'ont tous les <ul> du menu.

Finalement, ton css n'était pas très loin du but !

Edit : j'ai aussi remplacé le margin-top:12px par un padding-top:12px sur les ul.nav-menu ul, car sinon, on "perd" le hover quand on déplace la souris du menu principal au sous-menu. Ça finit par faire pas mal de modifications. Ci-dessous le code complet que j'ai utilisé :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
header {
	background: white;
	position: fixed;
	right: 0;
	left: 0;
	z-index: 22;
	border-bottom: 1px solid #ededed;
}

header nav .navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header nav .navigation .menu-checkbox {
	display: none;
}

header nav .navigation .menu-toggle {
	display: none;
}

header nav .navigation img {
	width: 120px;
}

header nav .navigation .nav-menu li {
	display: inline-block;
	margin: 0 1em 0 0;
	font-size: 0.95em;
	text-transform: uppercase;
	font-weight: 600;
}

header nav .navigation .nav-menu li a {
	padding-bottom: 1em;
	transition: 0.5s;
}

header nav .navigation .nav-menu li a:hover {
	opacity: 0.6;
	transition: 0.5s;
}

ul.nav-menu ul {
	position: absolute;
	top: calc(100% - 12px);
	display: none;
	background: transparent;
	z-index: 22;
	padding-top: 12px;
}

ul.nav-menu ul li {
	display: block;
	margin: 0 !important;
	float: none;
	font-size: 17px;
	border-bottom: 1px solid black;
}

ul.nav-menu ul a {
	display: block;
	padding: 1em 0.6em;
	color: black;
	transition: all 0.3s;
	position: relative;
}

ul.nav-menu ul a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #eee;
	z-index: -2;
}

ul.nav-menu ul a:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: black;
	transition: all .3s;
	z-index: -1;
}

ul.nav-menu ul a:hover {
	color: white;
	opacity: 1 !important;
}

ul.nav-menu ul a:hover:before {
	width: 100%;
}

ul.nav-menu li:hover > ul {
	display: flex;
	flex-direction: column;
}
</style>
</head>
<body>
	<header>
		<nav>
			<div class="navigation">
	          	<a href=""><img src="myImg.jpg"></a>
	        	<input type="checkbox" id="menu-checkbox" class="menu-checkbox">
				<label for="menu-checkbox" class="menu-toggle">
					<span></span>
					<span></span>
					<span></span>
				</label>
	        	<ul class="nav-menu">
				<li><a href="">Accueil</a></li>
	        		<li><a href="">Studio</a>
	        		<ul>
	        			<li><a href="">Cailloux</a></li>
	        			<li><a href="">Choux</a></li>
	        			<li><a href="">Genoux</a></li>
	        		</ul>
	        		</li>
	        		<li><a href="">Archive-Services</a></li>
	        		<li><a href="">Services</a></li>
	        		<li><a href="">Contact</a></li>
	        	</ul>
	        </div>
		</nav>
	</header>
</body>
</html>


Amicalement,
Modifié par parsimonhi (12 Oct 2020 - 21:00)
Meilleure solution
Bonjour,

Merci pour le retour,

Effectivement c'est du sass et j'ai pas mis le sous-menu dans le html vu que wp le génère automatiquement (erreur de ma part) j'aurai du le préciser et le rajouter.

En tout cas merci, je comprend mieux l'astuce !
Sujet clos
Aller à