28182 sujets

CSS et mise en forme, CSS3

Création d'un sous-menu

Bonjour,
Je viens de faire plusieurs tutos mais je n'arrive toujours pas à faire un sous-menu Smiley hum
Je vous donne mes CSS :
.nav {
	padding: 0;
	left: -3000px;
	position: relative;
	margin-bottom: 0;
	/* [disabled]margin-left: 0px; */
	margin-right: 10px;
	right: 0;
	animation-duration: 4s;
	animation-name: slidein;
}
@keyframes slidein {
  from {
    font-size: 80px;
  }
  75% {
    font-size: 30px;
  }

  to {
    font-size: 20px;
  }
}
.nav li {
	display: inline;
	list-style: none; /* nécessaire pour IE7 */
}

.nav li a {
	color: #FFFFFF;
	/* [disabled]border-spacing: 5px 5px; */
	font-family: "ralewaythin" Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 24px;
	float: right;
	margin-left: 0px;
	margin-top: 0px;
	/* [disabled]padding-bottom: 2px; */
	padding-left: 10px;
	padding-right: 10px;
	/* [disabled]padding-top: 2px; */
	/* [disabled]margin-top: 20px; */
	text-align: right;
	margin-right: 0px;
	display: table-cell;
	transition: all 0.3s;
    transform: scale(0.8);
	opacity: 1;
	text-shadow:0px 0px 10px black;

}

ul.nav li a h1 {
	font-family: small-caps normal Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

.nav li a:hover {
	color: #FFFFFF;
	/* [disabled]border-top-style: solid; */
	/* [disabled]border-left-width: 852px; */
	/* [disabled]border-left-style: solid; */
	/* [disabled]border-top-color: #333333; */
	/* [disabled]border-right-color: #333333; */
	/* [disabled]border-left-color: #333333; */
    transform: scale(1.2);
    opacity: 0.5;
}

nav ul li ul { 
display:none; /* Rend le menu déroulant caché par défaut */
} 
 
nav ul li:hover ul { /* Affiche la dropNav au survol de la souris avec la class .drop */
z-index:99999;
display:list-item !important;
position:absolute;
margin-top:5px;
margin-left:-10px;
}
 
nav ul li:hover ul li {
float:none;
}
		

.nav img {
	top:5px;
	margin-left: 20px;
}

.navbar-default {background-color: transparent;}
.navbar-brand, .navbar-default .navbar-nav > li > a {color: #777;}

Ainsi que mon HTML :
<div id="menu" class="navbar navbar-default navbar-fixed-top">
  <ul class="nav">
            <li><a href="Contact/formpage.html" target="_blank">Contact</a></li>
            <li><a href="#musette">Rock'n'Roll</a></li>
	  
	  		<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>

Une idée ?
Merci pour votre aide et bonne fin de week-end !
P.
Modérateur
Bonjour,

Quand je vois en commentaire dans le code /* nécessaire pour IE7 */, je me dis que ce n'est même pas la peine d'essayer de comprendre le reste du code ! Smiley cligne

Ceci étant, déjà, il faudrait savoir ce que tu veux faire, et en particulier savoir si tes sous-menus sont à afficher en permanence ou seulement si l'utilisateur décide de les déplier.

Amicalement,
Smiley lol Merci pour ton humour Smiley cligne
Visible uniquement lors du hover.
Suis-je loin d'y arriver ?
Merci et bonne soirée Smiley cligne
P.
Modérateur
Bonjour,
PLGPPUR a écrit :
Smiley lol Suis-je loin d'y arriver ?

Quelques parsecs ! Smiley lol

Le point important, quand on utilise un hover pour dérouler un sous-menu, est qu'il ne faut pas d'espace entre le <li> qui déclenche l'affichage du sous-menu et le <ul> du sous-menu lui-même, sinon on perdra le hover en déplaçant la souris du <li> vers le <ul> du sous-menu.

À part ça, il y avait des erreurs de syntaxe dans le css comme par exemple des lignes avec nav sans . devant alors que ton code html n'avait pas de balise <nav>, ainsi que quelques autres erreurs qui faisaient que ça n'avait aucune chance de fonctionner.

J'ai légèrement modifié le html (j'ai remplacé la <div> globale par une <nav>), et j'ai fait un peu le ménage dans le css (en particulier, j'ai supprimé les floats qui compliquaient les choses pour rien ici selon moi). C'est encore loin d'être parfait mais ça a l'air de fonctionner.
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
	margin: 0;
	padding: 10px 10px 0 0;
	position: relative;
	animation-duration: 4s;
	animation-name: slidein;
	text-align: right;
}

@keyframes slidein {
	from {font-size: 80px;}
	75% {font-size: 30px;}
	to {font-size: 20px;}
}

.nav ul, .nav li {
	margin: 0;
	padding: 0;
}

.nav li {
	display: inline;
	position: relative;
	list-style: none;
}

.nav li a {
	display: inline-block;
	margin: 5px 10px;
	color: #fff;
	font-family: sans-serif;
	font-size: 24px;
	transition: all 0.3s;
	transform: scale(0.8);
	opacity: 1;
	text-shadow:0px 0px 10px black;
	white-space: nowrap;
}

.nav li a:hover {
	color: #FFFFFF;
	transform: scale(1.2);
	opacity: 0.5;
}

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

.nav 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%;
	right: 0;
}
</style>
</head>
<body>
	<nav>
		<ul class="nav">
			<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>
</body>
</html>
Amicalement,
Modifié par parsimonhi (22 Feb 2023 - 02:55)
Meilleure solution
GENIAL !!!!
MERCI !!!! Smiley biggrin
Par contre, pas compris le :
a écrit :
Le point important, quand on utilise un hover pour dérouler un sous-menu, est qu'il ne faut pas d'espace entre le <li> qui déclenche l'affichage du sous-menu et le <ul> du sous-menu lui-même, sinon on perdra le hover en déplaçant la souris du <li> vers le <ul> du sous-menu.

Sujet RESOLU, encore MERCI !
Modifié par PLGPPUR (22 Feb 2023 - 12:13)
Bonjour parsimonhi
Pourquoi est-ce que quand je change "Menu1" pour un autre mot , les "Drop" (sous menu) ne sont plus centrés ?
Bizarre !??
Merci de ton aide,
Bon après-midi Smiley cligne 


		<ul class="nav">
			<li><a href="#">Bol</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>
Modérateur
Bonjour,

PLGPPUR a écrit :
Par contre, pas compris le :
"Le point important, quand on utilise un hover pour dérouler un sous-menu, est qu'il ne faut pas d'espace entre le <li> qui déclenche l'affichage du sous-menu et le <ul> du sous-menu lui-même, sinon on perdra le hover en déplaçant la souris du <li> vers le <ul> du sous-menu."


Si par exemple tu ajoutes un margin-top:1em à ton ul qui contient le sous-menu ...
.nav li ul {
	margin-top: 1em;
}
... alors tu verras que quand tu quittes menu1 avec la souris, le sous-menu disparait et tu ne pourras jamais cliquer dessus. Ceci est dû au fait qu'il y aura un espace de 1em entre menu1 et le sous-menu, et que donc en passant sur cette espace, tu ne seras plus en hover ni sur menu1 ni sur le sous-menu.

PLGPPUR a écrit :
Pourquoi est-ce que quand je change "Menu1" pour un autre mot , les "Drop" (sous menu) ne sont plus centrés ?
Bizarre !??

Parce que même quand cétait "Menu1", ce n'était pas plus centré. On avait l'impression que c'était plus ou moins centré parce que "Menu1", "Drop 1", etc. sont plus ou moins de la même largeur mais c'était du hasard.

Tu peux par exemple centrer les libellés avec quelque chose du genre :
.nav li a {
	min-width: 5em;
	text-align:center;
}
Le 5em est à adapter et doit être supérieur à la longueur du libellé le plus long.

Il y a d'autres manières de faire ce centrage (éventuellement sans connaitre a priori la largeur du libellé le plus long), mais c'est sensiblement plus compliqué.

Amicalement,
Modifié par parsimonhi (23 Feb 2023 - 17:04)
Bonsoir,
J'espère que le topic n'est pas définitivement fermé.
Alors, j'ai respecté à la règle cette façon de faire (encore merci Smiley cligne ) pour un menu "burger".
Mais voilà, le sous-menu passe à la fin du menu. Je ne sais pas si je dois vous envoyer du code, car il est +/- identique à, celui fourni précédemment.
Une capture "parlera" peut-être plus ?
Donc sur la capture, on peut voir "drop1"... en dernier alors que c'est le sous-menu de "Menu1" Smiley murf .
Alors, une aide serait bienvenue Smiley cligne
Bonne fin de weekend,
P. upload/1724535847-48192-menu.png
Prévenir un modérateur
Répondre au sujet
Aller à