11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Question sur Tuto Volet coulissant en CSS3 avec :target et tr

Bonjour à tous,
J'ai découvert le tuto Créer un volet coulissant en CSS3 avec :target et transition et je me demandais s'il était possible d'activer le mouvement du volet coulissant non pas avec un click mais juste avec le survol de la souris?
J'ai essayé de modifier le css en remplaçant target par hover, mais ça n'est pas un franc succès...
J'ai justement besoin d'un mouvement comme ceci pour mon menu gauche mais le click me semble en trop, un simple survol serait le top... mais je ne sais si c'est réalisable juste en css?
Modifié par djkori (01 Aug 2013 - 21:29)
C'est réalisable mais bon... ce n'est pas vraiment une bonne idée. Je serais toi j'éviterai d'aller dans cette direction.

C'est à JavaScript de gérer les comportements et à CSS de gérer la mise en forme.
jb_gfx a écrit :
C'est réalisable mais bon... ce n'est pas vraiment une bonne idée. Je serais toi j'éviterai d'aller dans cette direction.

C'est à JavaScript de gérer les comportements et à CSS de gérer la mise en forme.


Bonjour jb_gfx,
Merci pour la réponse
Ce n'est pas une bonne idée? Pourquoi? Trop dur à réaliser?
Zelalsan a écrit :
bin très simplement

#volet:hover {left:10px}


Ah?
Bin je sais pas si c'est si simple... ça ne marche pas... j'ai essayé pas mal de combines avec le fameux :hover mais rien n'y fait...
Tu as un code qui pourrait marcher?
Modifié par djkori (02 Aug 2013 - 22:33)
Je ne vois pas comment ça ne marche pas. Le même code en remplaçant "#volet:target" par "#volet:hover".

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Je suis caché !</title>
	<style type="text/css">
	<!--
		body {
			margin:0; padding:10px 40px; 
			background:#F1EFE2;
			font-size: 1.4em;
			font-family: georgia, "trebuchet ms", arial, serif;
		}
		h1 {
			margin-top: 20px; margin-bottom: 40px;
			color: #345;
			text-shadow: 1px 1px 1px #fff;
		}
		h2 {
			color: #678;
			text-shadow: 1px 1px 1px #fff; 
			font-size:1.1em
		}

		/* code du tutoriel ci-dessous */

		#volet {
			width: 250px;
			padding: 10px;
			background: #6B9A49; color: #fff;	
		}
		#volet a.ouvrir {
			padding: 10px 25px;
			background: #555;
			color: #fff;
			text-decoration: none;
		}

		#volet {
			position: absolute;
			left: -270px; top: 55px;
			-webkit-transition: all .5s ease-in;
			-moz-transition: all .5s ease-in;
			transition: all .5s ease-in;
		}
		#volet a.ouvrir {
			position: absolute;
			right: -88px;
			top: 150px;
			-webkit-transform: rotate(270deg);
			-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
			-moz-radius: 0 0 8px 8px;
			border-radius: 0 0 8px 8px;
		}
		#volet:hover {
			left: 0;
		}
	-->
	</style>
</head>
<body>
	<h1>Je suis caché !</h1>
	<h2>Un bloc qui apparaît au clic</h2>
	
	<div id="volet">
		<p>Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus</p>
		<p>Wurscht elementum semper tellus s'guelt Pfourtz !</p>
		
		<a href="#volet" class="ouvrir" aria-hidden="true">Ouvrir !</a>
	</div>

</body>
</html>
Zelalsan a écrit :
Je ne vois pas comment ça ne marche pas. Le même code en remplaçant &quot;#volet:target&quot; par &quot;#volet:hover&quot;.


Autant pour moi, ce qui coinçait c'était le petit onglet "Ouvrir", j'ai décalé #volet de 10px pour pouvoir le chopper au survol et enlevé l'onglet et ça marche impecable.. c'est vraiment ce dont j'ai besoin.
Je vais donc adapter aux besoin de mon site.
Megnifique, merci! Smiley smile
Modifié par djkori (03 Aug 2013 - 17:41)
Bonjour à nouveau, j'ai donc adapté le code sur mon site en intranet, et c'est super, merci pour ce coup de main

Voici le code simplifié, j'ai finalement enlevé la languette et décalé le div volet pour avoir une languette émanant du div même, plus simple, plus performant:

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="iso-8859-1">
	<title>Je suis caché !</title>
	<style type="text/css">
	<!--
		body {
			margin:0; padding:10px 40px; 
			background:#F1EFE2;
			font-size: 1.4em;
			font-family: georgia, "trebuchet ms", arial, serif;
		}
		h1 {
			margin-top: 20px; margin-bottom: 40px;
			color: #345;
			text-shadow: 1px 1px 1px #fff;
		}
		h2 {
			color: #678;
			text-shadow: 1px 1px 1px #fff; 
			font-size:1.1em
		}

		/* code du tutoriel ci-dessous */

		#volet {
			width: 265px;
                                                min-height:90%;
			padding: 10px;
			background: #6B9A49; color: #fff;	
		
			position: fixed;
			left: -270px; top: 25px;
			-webkit-transition: all 0.3s ease-in;
			-moz-transition: all 0.3s ease-in;
			transition: all 0.3s ease-in;
                                                border-radius: 3px;
		}
		#volet:hover {
			left: 0;
		}
	-->
	</style>
</head>
<body>
	<h1>Je suis caché !</h1>
	<h2>Un bloc qui apparaît au survol</h2>
	
	<div id="volet">
		<p>Ici le menu</p>
		<p>Et c'est cool !!</p>
		
		
	</div>
                
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>


Je marque comme résolu
Smiley smile
Modifié par djkori (05 Aug 2013 - 15:22)
Sujet clos
Aller à