27864 sujets

CSS et mise en forme, CSS3

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 ?