How do I get a button element to move the navbar to rotate using HTML and CSS?
Basically I have a html page where I click a square when I set the sliding bar. How do I make the square rotate 180 degrees when I click on it? I can only control the click of a button div or a button that rotates, but not at the same time. I noticed that it has something to do with how I place the input tag. If it is inside the label, the button rotates, but the panel has no effect. If it is outside the label, clicking the square brings up the sidebar. Spent this day all day but didn't seem to get it. Ideally I would like to get an arrow instead of an area, but I don't know where to start ...
-sliding div: https://codepen.io/yung_terminal/pen/oWrZZj
HTML:
<div class="main-wrap">
<input id="slide-sidebar" type="checkbox" role="button" />
<label for="slide-sidebar">
<div class="tab"></div>
</label>
<div class="content">
</div>
</div>
CSS
.sidebar {
background-color: white;
width: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
#navpan {
position: absolute;
right: 120px;
bottom: 740px;
}
.sidebar li{
color: black;
font-weight: bold;
font-size: 25px;
text-decoration: none;
list-style: none;
}
.content {
background-color: red;
position: absolute;
top: 0;
left: 190px;
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
input[type=checkbox] {
display: none;
}
input:checked ~ .content{
left: 0;
}
input:checked ~ label {
left: 0;
}
label {
z-index: 2;
position: absolute;
top: 50%;
left: 190px;
background-color: 0;
font-size:60px;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
.tab {
width: 100px;
height: 100px;
background-color: white;
transition: all 0.75s 0.25s;
transform: rotate(0);
}
#slide-sidebar:checked + .tab{
transform: rotate(180deg);
}
source to share
I have updated your code. Please check it out. DEMO . I added a function onclick
to this field and created a class rotated
. Using css I rotate this box 90 degrees.
$(document).ready(function() {
$('#rotate').click(function(){
$(this).toggleClass('rotated');
});
});
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sidebar {
background-color: white;
width: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
#navpan {
position: absolute;
right: 120px;
bottom: 740px;
}
.sidebar li{
color: black;
font-weight: bold;
font-size: 25px;
text-decoration: none;
list-style: none;
}
.content {
background-color: red;
position: absolute;
top: 0;
left: 190px;
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
input[type=checkbox] {
display: none;
}
input:checked ~ .content{
left: 0;
}
input:checked ~ label {
left: 0;
}
label {
z-index: 2;
position: absolute;
top: 50%;
left: 190px;
background-color: 0;
font-size:60px;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
.tab {
width: 100px;
height: 100px;
background-color: white;
transition: all 0.75s 0.25s;
}
#slide-sidebar:checked + .tab{
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
<input id="slide-sidebar" type="checkbox" role="button" />
<label for="slide-sidebar">
<div class="tab" id="rotate"></div>
</label>
<div class="content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nulla accusamus illo a dolorum quo, maxime fuga ea nam quae ab deserunt quas distinctio culpa recusandae assumenda quisquam repellendus, perferendis!</h1>
</div>
</div>
source to share
You are close, but not quite there.
You need to change: #slide-sidebar:checked + .tab
To: #slide-sidebar:checked + label>.tab
In the original selector, you expect to .tab
be a sibling checkbox
. label
is sibling with .tab
being a child label
.
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sidebar {
background-color: white;
width: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
#navpan {
position: absolute;
right: 120px;
bottom: 740px;
}
.sidebar li{
color: black;
font-weight: bold;
font-size: 25px;
text-decoration: none;
list-style: none;
}
.content {
background-color: red;
position: absolute;
top: 0;
left: 190px;
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
input[type=checkbox] {
display: none;
}
input:checked ~ .content{
left: 0;
}
input:checked ~ label {
left: 0;
}
label {
z-index: 2;
position: absolute;
top: 50%;
left: 190px;
background-color: 0;
font-size:60px;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
.tab {
width: 100px;
height: 100px;
background-color: white;
transition: all 0.75s 0.25s;
}
#slide-sidebar:checked + label>.tab{
transform: rotate(180deg);
}
<div class="main-wrap">
<input id="slide-sidebar" type="checkbox" role="button" />
<label for="slide-sidebar">
<div class="tab" id="rotate"></div>
</label>
<div class="content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nulla accusamus illo a dolorum quo, maxime fuga ea nam quae ab deserunt quas distinctio culpa recusandae assumenda quisquam repellendus, perferendis!</h1>
</div>
</div>
source to share