26749 sujets

CSS et mise en forme, CSS3

Bonjour à tous !
Nouveau sur le forum, et ayant parcouru des sujets interminables, je fais appel à la communauté pour m'aider.

Je me suis inspiré d'un tuto (https://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html) et l'ai quelque peu modifier.
En effet je le voulais en vertical et pas horizontal.

Jusqu'ici tout va bien Smiley smile

Maintenant je souhaite le plier sur lui même et qu'il ne reste que le bouton "ouvrir"
Cependant, mon bloc lorsque je clic sur "fermer" monte sur ma page au lieu de rester sur place et de plier mon menu.

Petite précision, je ne peux pas utiliser le JSQUERY pour des raisons qui ne m'appartiennent pas...

Voici mon code :

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>une marque</title>	
	<link rel="stylesheet" href="volet.css">
</head>
<body>
	<h1>marque</h1>
	<h2>cliquez pour les marques</h2>
	
	<div id="volet_clos">
		<div id="volet">
		<a href="#volet" class="ouvrir" aria-hidden="true">Montrer les marques</a>
		<a href="#volet_clos" class="fermer" aria-hidden="true"> Cacher les marques</a>
			<img class="zoom" src="Addiction.jpg" alt="addiction"/></a>
			<img class="zoom" src="Alfa Siempre.jpg" alt="alfasiempre"/>
			<img class="zoom" src="alfaliquid.jpg" alt="alfaliquid"/>
			<img class="zoom" src="allstarz.jpg" alt="allstarz"/>
			<img class="zoom" src="Amethyst.jpg" alt="Amethyst"/>
			<img class="zoom" src="AtelierDuVapoteur.jpg" alt="AtelierDuVapoteur"/>
			<img class="zoom" src="BenNorthon.jpg" alt="BenNorthon"/>
			<img class="zoom" src="BertignacByDLice.jpg" alt="BertignacByDLice"/>
			<img class="zoom" src="Bounty hunters.jpg" alt="Bounty hunters"/>
			<img class="zoom" src="BrewellVapory.jpg" alt="BrewellVapory"/>
			<img class="zoom" src="ButterMilkBySavourea.jpg" alt="ButterMilkBySavourea"/>
			<img class="zoom" src="CloudVapor.jpg" alt="CloudVapor"/>
			<img class="zoom" src="CrazyDrip.jpg" alt="CrazyDrip"/>
			<img class="zoom" src="Cust'Art.jpg" alt="Cust'Art"/>
			<img class="zoom" src="D50_By_DLice.jpg" alt="D50_By_DLice"/>
			<img class="zoom" src="Dandy.jpg" alt="Dandy.jpge"/>
			<img class="zoom" src="DarkStoryByAlfaliquid.jpg" alt="DarkStoryByAlfaliquid"/>
			
		</div>
		</div>
	</div>

</body>
</html>


et ici en CSS
#volet {
			position: absolute;
			top: center;
			right:150px;
			width: 850px;
			padding: 10px;
			background: #555555; color: #fff;	
		}
		
		#volet a.ouvrir,
		#volet a.fermer {
			position: absolute;
			top: center;
			right: 150px;
			padding: 10px 25px;
			background: #f29b29;
			color: #fff;
			text-decoration: none;
		}

		#volet {
			position: absolute;
			top: center;  /* test fixed + scroll, on retire la position top */
			right: 150px;
			-webkit-transition: all .5s ease-in;
			-moz-transition: all .5s ease-in;
			transition: all .5s ease-in;
		}
		#volet a.ouvrir,
		#volet a.fermer {
			position: absolute;
			bottom: -37px;
			right: 350px;
			top: center;
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-moz-border-radius: 0 0 8px 8px;
			border-radius: 0 0 8px 8px;
		}
		#volet a.fermer {
			display: none;
		}
		#volet:target {
			top: 1px;
		}

		/* code pour la fermeture */

		#volet:target a.fermer {
			display: block;
		}
		#volet:target a.ouvrir {
			display: none;
		}
		#volet_clos:target #volet {
			top: -122px;
		}
		
		 /* test fixed + scroll */
		#volet_clos {
			position: fixed; 
			top: 150px; right: 0;
		}
Merci à toi BAZOOKA07 !! Je teste ça et reviens pour dire ce qu'il en est Smiley smile

Edit : c'est pas encore tout à fait ça.

Je voudrais que le volet soit fermé et non caché en dehors de ma fenêtre. Avec ta proposition les images restent visibles même quand le volet est "fermé".

upload/1541589001-73072-screenshot2018-11-07e-liquide.png

Je souhaiterais que lorsqu'on clique sur "afficher les images" le bloc s'ouvre et lorsqu'on clic sur "masquer les images" le bloc revient à sa position initiale avec juste le bouton "afficher les images"

Un peu à la manière d'un menu et de son sous menu en terme d'animation.

D'avance merci
Modifié par ajja17r (07 Nov 2018 - 12:11)