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
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 :
et ici en CSS
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
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;
}