28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,
Je suis parti de ce topic (lancé par moi et résolu) :
https://forum.alsacreations.com/topic-4-90289-1.html
mais voilà, je n'arrive pas à reproduire ce sous menu sur une version "burger".
Les sous-menus se mettent à la fin de la liste déroulante (voir image).
Je vous joint les CSS

nav .mynavbar li ul
{
	display: none;
	/* Rend le menu déroulant caché par défaut */
}

nav .mynavbar li:hover ul
{
	/* Affiche le ul contenant le sous-menu au survol de la souris */
	/* Il ne faut pas d'espace entre le li qui déclenche l'affichage du sous-menu et ce ul */
	/* Sinon, quand on déplacera la souris du li vers le sous-menu, on perdra le hover */
	z-index: 99999;
	display: block;
	position: absolute;
	top: 100%;
	float: left;
}

.mynavbar li a:hover
{
	color: #7a6d58;
	transform: scale(1.2);
	opacity: 0.5;
}

*
{
	margin: 0;
	padding: 0;
}

.mynavbar li a
{
	color: yellow;
	text-decoration:none;
}

.container
{
	max-width: 1050px;
	width: 90%;
	margin: auto;
}

.mynavbar
{
	width: 100%;
	box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
	position: fixed;
	z-index: 999999999999999;
	margin-top: 0px;
	display: none;
}

.mynav-container
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 62px;
}

.mynavbar .menu-items
{
	display: flex;
}

.mynavbar .nav-container li
{
	list-style: none;
	list-style-type:none;
}

.mynavbar .nav-container a
{
	text-decoration: none;
	color: #0e2431;
	font-weight: 500;
	font-size: 1.2rem;
	padding: 0.7rem;
	float: left;
	left: 0px;
}

.mynavbar .nav-container a:hover
{
	font-weight: bolder;
	text-decoration:none;
}

.mynav-container
{
	display: block;
	position: relative;
	height: 60px;
	text-decoration:none;
}

.mynav-container .checkbox
{
	position: absolute;
	display: block;
	height: 32px;
	width: 32px;
	top: 20px;
	left: 20px;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
	text-decoration:none;
}

.mynav-container .hamburger-lines
{
	display: block;
	height: 26px;
	width: 32px;
	position: absolute;
	top: 17px;
	left: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: yellow;
	text-decoration:none;
}

.mynav-container .hamburger-lines .line
{
	display: block;
	height: 4px;
	width: 100%;
	border-radius: 10px;
	background: white;
}

nav .mynav-container .hamburger-lines .line1
{
	transform-origin: 0% 0%;
	transition: transform 0.4s ease-in-out;
}

nav .mynav-container .hamburger-lines .line2
{
	transition: transform 0.2s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

nav .mynav-container .hamburger-lines .line3
{
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;
}

nav .mynavbar .menu-items
{
	padding-top: 120px;
	box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
	height: 100vh;
	width: 80%;
	transform: translate(-150%);
	display: flex;
	flex-direction: column;
	margin-left: 10%;
	margin-right: 10%;
	transition: transform 0.5s ease-in-out;
	text-align: left;
	list-style-type:none;
	text-decoration:none;
	color: white;
	padding-left: 20px;
	line-height: 150%;
	color: yellow;
	text-decoration:none;
}

nav .mynavbar .menu-items li
{
	margin-bottom: 1.2rem;
	font-size: 1rem;
	font-weight: 500;
	color: yellow;
	text-decoration:none;
	text-align: left;
	left: 0px;
}

.mynav-container input[type="checkbox"]:checked ~ .menu-items
{
	transform: translateX(0);
}

.mynav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1
{
	transform: rotate(45deg);
}

.mynav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2
{
	transform: scaleY(0);
}

.mynav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3
{
	transform: rotate(-45deg);
}

.mynav-container input[type="checkbox"]:checked ~ .logo
{
	display: none;
}

.marge_haut
{
	margin-top: -10px;
}


Ainsi que le HTML
<nav>
	<div class="mynavbar">
		<div class="container mynav-container">
			<input class="checkbox" type="checkbox" name="" id="" />
			<div class="hamburger-lines">
				<span class="line line1"></span>
				<span class="line line2"></span>
				<span class="line line3"></span>
			</div>
			<div class="menu-items">
				<nav>
					<ul class="mynavbar">
						<li>
							<a href="#">Menu1</a>
							<ul>
								<li><a href="#">Drop 1</a></li>
								<li><a href="#">Drop 2</a></li>
								<li><a href="#">Drop 3</a></li>
							</ul>
						</li>
						<br>
						<li><a href="#musette">Rock'n'Roll</a></li>
						<br>
						<li><a href="Contact/formpage.html" target="_blank">Contact</a></li>
					</ul>
				</nav>
			</div>
		</nav>
		<div id="loader">
			<div class="cs-loader">
				<div class="cs-loader-inner">
					<label>?</label>
					<label>?</label>
					<label>?</label>
					<label>?</label>
					<label>?</label>
					<label>?</label>
				</div>
			</div>
		</div>
upload/1724962726-48192-menu.png
Merci beaucoup et bonne soirée;)
P.
Modifié par PLGPPUR (29 Aug 2024 - 22:21)
Bonsoir Niuxe,
J'ai bien cherché à comprendre ce que tu voulais dire en regardant X fois mon code, mais je ne vois pas Smiley ohwell Des sauts de lignes ? <label >?
Désolé, puis-je en savoir plus ?
Merci beaucoup.
Bonne soirée,
P.
Bonsoir, Passez votre code au validateur pour voir et corriger vos erreurs https://validator.w3.org/#validate_by_input
La balise <ul> (comme <ol>) n'accepte que la balise <li> comme enfant direct. Vos balise <br> n'ont rien à faire dans une liste.

Pourquoi utiliser des balises <label>? Je n'en vois pas le sens sémantique.
Avant d'écrire la moindre ligne de CSS, votre HTML doit être dépourvu d'erreurs de syntaxe.
Bonjour casper2,
je cherche depuis ce matin (pas mal d'erreurs détectées par W3C) Smiley ohwell
Je vous tiens au courant.
Bonne après-midi Smiley cligne
P.
Bonjour à tous,
voici le HTML enfin propre :
<nav class="">
      <div class="mynavbar">
        <div class="container mynav-container">
            <input class="checkbox" type="checkbox">
            <div class="hamburger-lines">
              <span class="line line1"></span>
              <span class="line line2"></span>
              <span class="line line3"></span>
			</div>

          <div class="menu-items">
	<nav>
		<ul class="mynavbar">
			<li><a href="#">Menu1</a>
				<ul>
					<li><a href="#">Drop 1</a></li>
					<li><a href="#">Drop 2</a></li>
					<li><a href="#">Drop 3</a></li>
				</ul>
			</li>
			<li><a href="#musette">Rock'n'Roll</a></li>
			<li><a href="Contact/formpage.html" target="_blank">Contact</a></li>
		</ul>
			  </nav>
			</div></div></div>

Le problème reste le même : les sous-menus (Drop1 et Drop2)apparaissent à la fin du menu, comme le montre la capture jointe auparavant.
Les CSS n'ont pas changé.

Merci pour votre aide,
P.
Bonjour,
Plusieurs problème en CSS, j'ai l'impression que vous ne savez pas exactement toutes les implications de l'application des propriétés que vous utilisez.
Pour le sélecteur .mynavbar il y a un display: none; je dois commenter cette propriété pour voir le burger menu. Puisque cette classe est utilisée pour le parent du burger menu, donc cellui-ci n'apparais pas au chargement de la page.

Je ne comprends pas pourquoi vous faite flotter votre sous menu ni pourquoi celui ci est positionné???
J'ai commenté les propriétés inutiles :

    nav .mynavbar li:hover ul {
      /* Affiche le ul contenant le sous-menu au survol de la souris */
      /* Il ne faut pas d'espace entre le li qui déclenche l'affichage du sous-menu et ce ul */
      /* Sinon, quand on déplacera la souris du li vers le sous-menu, on perdra le hover */
      /* z-index: 99999; */
      display: block;
      /* position: absolute; */
      /* top: 100%; */
      /* float: left; */
    }


Autre chose : ceci n'est pas à faire :

  * {
      margin: 0;
      padding: 0;
    }

Inutile de péter toutes les marges de tout les éléments surtout pour ceux qui n'en on pas. De toutes façon vous devrez les remettre par après . Reset au cas par cas, ou utilisez une feuille de style par défaut de type normalize .
Lire également : https://www.alsacreations.com/astuce/lire/36-la-technique-du-reset-css.html
https://www.alsacreations.com/article/lire/1867-reset-css-une-histoire-heritage-et-reinitialisation.html

Pour .mynavbar pas de width: 100% sur un éléments positionné. Utiliser left: 0; right: 0; Lire width: 100%, tu es le Mal !

Pour nav .mynavbar .menu-items li, left: 0px; n'est pas pris en compte car ce n'est pas un élément positionner (voir via l'inspecteur des éléments (touche F12)). Et l'unité n'est pas nécessaire pour la valeur zéro.

Pour .mynav-container .hamburger-lines vous avez plusieurs propriété display. La dernière valeur écrase les précédentes.

Je vous recommande ce site pour réaliser vos menus déroulants : https://www.frogweb.fr/
Modifié par casper2 (03 Sep 2024 - 15:57)
Bonjour casper2
Super, problème résolu Smiley biggrin
Je vais tout potasser et regarder les liens envoyés Smiley cligne
Excepté toutes mes erreurs; qu'est-ce qui empêchait vraiment le bon placement du sous-menu ?
Merci énormément.
Bonne journée,
P.
PLGPPUR a écrit :
Bonjour casper2
qu'est-ce qui empêchait vraiment le bon placement du sous-menu ?

Bonjour, Tel que le code avait été écrit, je pense que c'est le positionnement absolute qui n'est pas compatible avec le display none/block.
Je suis parti du postula que vous cachiez les sous menus avec un display none; j'ai adapter le code pour qu'il fonctionne dans ces conditions. Mais, comme l'explique frogweb sur son site, l'usage d'un display: none/block pose de problème d'accessibilité.

Comment faire alors? Utiliser le positionnement absolute en positionnant ce que l'on souhaites cacher hors écran, c'est à dire vers la gauche de la partie visible. Lire :
Positionnement hors écran (anysurfer)
Techniques CSS pour cacher du texte
La solution proposée est fonctionnel mais pas accessible. Je vous recommande d'utiliser la technique de cacher le sous menu hors écran plutôt qu'avec display tel que décrit sur le site de frogweb.
Vérifier également que le sous menu est accessible en utilisant le clavier.
Bonne continuation.
Modifié par casper2 (04 Sep 2024 - 11:56)
merci beaucoup casper2, je comprends la logique.
Frogweb, oui je connais Smiley smile je vais aller voir ses liens. J'ai encore tellement à apprendre/comprendre.
Encore merci et bonne soirée Smiley biggrin
P.