28112 sujets

CSS et mise en forme, CSS3

Temporisation et debug sur menu déroulant CSS

Salutations,

Je suis en train de monter un petit menu déroulant de ci, de la, pour un site associatif.
J'arrive à bien tout bidouiller, si ce n'est que j'aimerai rajouter une temporisation au survol des sous-menus, afin que ceux-ci restent ouverts par ex. 0,5 sec.

Seconde question d'ailleurs, comme je constate que si on decollapse tous les sous-menus, on est offset de l'écran d'un mobile lambda, existe t'il, avec ce code, un moyen de fermer un sous-menu quand on en ouvre un autre (toujours en mode responsive bien sur) ?

Pour clore, comme je vais insérer ce menu dans un site qui a déjà des feuilles de styles, comment éviter qu'elles interfèrent ? Par exemple que les li ou ul de ce menu ne soient pas ceux définis dans le CSS du site et réciproquement ?

Voici les codes actuels :
 
<!-- Partie incluse par le fichier menu-2020.php !-->
 
<div id="menu-2020">
 
	<nav>
		<div id="titremenu">
			<div id="sociaux">
				<!-- Media sociaux !-->
				(...)
			</div>
		</div>
		<div id="menus">
			<div id="barmenus">
				<label for="drop" class="toggle">&#x2630; Menu</label>
				<input type="checkbox" id="drop" />
				<ul class="topmenu">
					<li><a href="#">Accueil</a></li>
					<li> 
						<!-- Sous-menu 1 -->
						<label for="drop-1" class="toggle">Association &#x25BF;</label>
						<a href="#">Association</a>
						<input type="checkbox" id="drop-1"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li> 
						<!-- Sous-menu 2 -->
						<label for="drop-2" class="toggle">Collections &#x25BF;</label>
						<a href="#">Collections</a>
						<input type="checkbox" id="drop-2"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li> 
						<!-- Sous-menu 3 -->
						<label for="drop-3" class="toggle">Support &#x25BF;</label>
						<a href="#">Support</a>
						<input type="checkbox" id="drop-3"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li> 
						<!-- Sous-menu 4 -->
						<label for="drop-4" class="toggle">Services &#x25BF;</label>
						<a href="#">Services</a>
						<input type="checkbox" id="drop-4"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li><a href="#">Contact</a></li>
 
				<!--<li><!-- Sous-menu double -->
						<!--<li><label for="drop-5" class="toggle">ervices 0 &#x25BF;</label>
						<a href="#">Support</a>
						<input type="checkbox" id="drop-5"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li>
								<!-- Second Tier Drop Down -->
								<!--<li><label for="drop-6" class="toggle">Services 1 &#x25BF;</label>
								<a href="#">Services</a>
								<input type="checkbox" id="drop-6"/>
								<ul>
									<li><a href="#">Service 1</a></li>
									<li><a href="#">Service 2</a></li>
									<li><a href="#">Service 3</a></li>
								</ul>
							</li>
						</ul>
					</li>!-->
 
				</ul>
			</div>
		</div>
	</nav>
 
</div>
 
<!-- Fin de partie incluse par le fichier menu-2020.php !-->


et :

/*********** Menu 2020 ***********/
#menu-2020 {
	position: relative;
	width: auto;
	height: 30px;
	background-color: #FFFFFF; /* Fond de la barre globale */
}
 
.toggle, [id^=drop] {
	display: none;
}
 
nav {
	margin: 0px;
	padding: 0px;
	width: auto;
	height: 30px;
}
 
#titremenu {
	position: absolute;
	display: block;
	left: 0px;
	width: 250px;
	height: 30px;
}
 
#sociaux {
	display: inline-flex;
	height: 30px!important;
}
 
#sociaux a {
	padding: 0px 5px 0px 5px!important;
	height: 30px!important;
}
 
#sociaux span {
	vertical-align: middle;
}
 
#sociaux a:hover {
	background-color: #FFFFFF;
}
 
#menus {
	position: absolute;
	display: block;
	right: 0px;
	width: 700px;
	height: 30px;
}
 
#barmenus {
	height: 30px;
	border-left-style: solid; /* Border menus */
	border-left-color: #333333; /* Border menus */
	border-radius: 5px 0px 0px 5px; /* Arrondi menu */
	background-color: #333333; /* Fond bloc global menus */
}
 
nav:after {
	content: "";
	display: table;
	clear: both;
}
 
nav ul {
	float: right;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
 
nav ul li {
	margin: 0px;
	display: inline-block;
	float: left;
	background-color: #333333; /* Fond Menus */
}
 
nav a {
	display: block;
	padding: 0 15px;
	line-height: 30px;
	font-family: Verdana, Arial;
	-webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */
	color: #FFFFFF; /* Couleur liens */
	font-size: 15px;
	text-decoration: none;
	font-weight: none;
}
 
nav ul li ul li:hover { background: #FF8727; } /* Fond OnMouseOver sous-sous menus */
 
nav a:hover {
	background-color: #FF8727; /* Fond OnMouseOver menus */
	text-shadow: 2px 1px 1px #000000; /* Ombrage liens */
}
 
nav ul ul {
	display: none;
	position: absolute;
	top: 30px;
	border-bottom-style: solid; /* Border sous-menus */
	border-bottom-color: #555555; /* Border sous-menus */
	border-radius: 0px 0px 5px 5px; /* Arrondi sous-menus */
}
 
nav ul ul a {
	font-size: 70%; /* Taille liens sous-menus */
}
 
nav ul li:hover > ul { display: inherit; }
 
nav ul ul li {
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
	background-color: #555555; /* Fond sous-menus */
}
 
nav ul ul ul li {
	position: relative;
	top: -30px;
	left: 170px;
}
 
li > a:after { content: ' \25BE'; } /* Fleche descendante pour sous-menus */
 
/* ul ul li > a:only-child:before { content: ''; } */
 
li > a:only-child:after { content: ''; } /* Retirer la fleche sur les liens seuls */
 
 
 
/* Media Queries
--------------------------------------------- */
 
@media all and (max-width : 999px) {
 
	#menu-2020 {
		height: 120px;
	}
 
	#titremenu {
		top: 0px;
		padding: 0px;
		width: 100%;
		height: 60px;
		text-align: right;
	}
 
	#sociaux {
		height: 60px!important;
	}
 
	#sociaux a {
		height: 60px!important;
	}
 
	#menus {
		right: initial; /* Reinit decalage menus */
		bottom: 0px;
		width: 100%; /* Largeur du bouton menu initial */
		height: 60px;
	}
 
	#barmenus {
		height: 60px;
		border: 0px;
		text-align: left;
	}
 
	nav { height: 120px; }
 
	.toggle + a, .topmenu { display: none; }
 
	.toggle {
		display: block;
		background-color: #333333;
		padding: 0px 20px;
		color: #FFF;
		font-size: 20px;
		line-height: 60px;
		text-decoration: none;
		border: none;
	}
 
	.toggle:hover { background-color: #FF8727; }
 
	[id^=drop]:checked + ul { display: block; }
 
	nav ul li {
		display: block;
		width: 100%;
	}
 
	nav a {
		line-height: 60px; /* Largeur de lignes des liens */
		font-size: 20px;
	}
 
	nav ul li a { padding-left: 20px; } /* Correctetion decalage liens menu */
 
	nav ul ul .toggle, nav ul ul a { padding: 0 40px; font-size: 15px } /* Liens sous-menus */
 
	nav ul ul ul a { padding: 0 80px; } /* Decalage liens sous-sous-menus */
 
	nav a:hover, nav ul ul ul a { background-color: #FF8727; }
 
	nav ul li ul li .toggle, nav ul ul a { background-color: #212121; } /* Fond sous-menus */
 
	nav ul ul {
		float: none;
		position: static;
		color: #ffffff;
	}
 
	nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; }
 
	nav ul ul li {
		display: block;
		width: 100%;
	}
 
	nav ul ul ul li { position: static;	}
}


Merci de votre aide Smiley cligne
Modifié par Casio (15 Apr 2020 - 15:45)
Coucou Casio !
Je t'ai concocté ceci. J'ai utiliser du jquery, je ne sais pas s'il est possible de faire ça en html ou en css. Est-ce que tu pourrais me dire la façon dont tu fais apparaître ton menu déroulant? (display block / opacity 1 / augmentation de la height etc ). Si ta d'autres question hesite pas ! 


<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#" class="service1">Service 1</a></li>
<li><a href="#" class="service2">Service 2</a></li>
<li><a href="#" class="service3">Service 3</a></li>
</ul>



$('#drop-1').mouseenter(function(){
setTimeout(function(){
  $('.service1').add('.service2').add('.service3').css('display', 'block');
}, 500ms);  
});

Modifié par vzytoi (16 Apr 2020 - 13:03)
Tu peux tenter autre chose ... Smiley confus 



.menu:hover .menu-deroulant {
display: block;
transition: 500ms;
transition-delay: 0.5s /*la valeur dont tu as parlé */
}
Salutations,

Merci, j'ai un peu essayé, mais cela ne donne pas grand chose.

J'essaye d'éviter du mettre du jQuery.

Any idea pour faire fermer un sous-menu lorsqu'un autre est ouvert ?
Sujet clos
Aller à