I have a problem with doing a nice menu based on photos, with hidden content behind them.
The RED and GREEN containers are buttons working with checkboxes. I want this code to work like this:
The content behind the button is a text referring to a button (photo), which will be shown to the user only after pressing it. I wish my flyout would push the rest of the page down.
At the moment, this is what is happening, but unfortunately the second GREEN button does not return to its position touching the RED one, but hides underneath it. It protrudes as much as the content from under the RED is high.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 16px;
box-sizing: border-box;
}
.container {
width: 500px;
margin: 0 auto;
background-color: grey;
}
#firstButtonCheck {
position: absolute;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
}
#firstButtonCheck ~ .firstContent {
margin-top: -100%;
width: 500px;
display: block;
transition: margin-top 1s ease-out, max-height 1s ease-out;
margin-left: auto;
margin-right: auto;
}
.firstButton {
display: block;
height: 400px;
width: 100%;
background-color: red;
cursor: pointer;
position: relative;
z-index: 2;
margin: 0 auto;
}
#firstButtonCheck:checked ~ .firstContent {
margin-top: 0px;
transition: margin-top 1s ease-out, max-height 1s ease-out;
}
#secondButtonCheck {
position: absolute;
opacity: 0;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
}
#secondButtonCheck ~ .secondContent {
margin-top: -100%;
margin-left: auto;
margin-right: auto;
width: 500px;
display: block;
transition: margin-top 1s ease-out, max-height 1s ease-out;
}
.secondButton {
display: block;
width: 500px;
height: 500px;
background-color: green;
cursor: pointer;
position: relative;
z-index: 1;
margin: 0 auto;
}
#secondButtonCheck:checked ~ .secondContent {
margin-top: 0px;
transition: margin-top 1s ease-out, max-height 1s ease-out;
}
.secondContent {
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="firstButtonCheck"/>
<label class="firstButton" for="firstButtonCheck"></label>
<div class="firstContent">
<h1>923id92i3d93i</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<input type="checkbox" id="secondButtonCheck"/>
<label class="secondButton" for="secondButtonCheck"></label>
<div class="secondContent">
<h1>dasdasda</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire