<div class="wrapper">
<input type="checkbox" id="menuToggler" class="input-toggler"/>
<label for="menuToggler" class="menu-toggler">
<span class="menu-toggler__line"></span>
<span class="menu-toggler__line"></span>
<span class="menu-toggler__line"></span>
</label>
</div>
<a class="sb-link" href="//silvestarbistrovic.from.hr/en/articles/css-sidebar-toggle/">silvestarbistrovic.from.hr</a>
// variables
:root {
--toggler-size: 30px;
--toggler-line-number: 3;
--toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1));
--toggler-offset-left: 10px;
--toggler-offset-top: 10px;
--toggler-color: Tomato;
--toggler-color-hover: Tomato;
}
// same as var(--toggler-line-number)
$total: 3;
// reset
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
// styling
.menu-toggler {
display: block;
width: var(--toggler-size);
height: var(--toggler-size);
position: relative;
position: fixed;
top: var(--toggler-offset-top);
left: var(--toggler-offset-left);
cursor: pointer;
z-index: 1;
}
.menu-toggler__line {
height: var(--toggler-line-size);
background: var(--toggler-color);
position: absolute;
border-radius: calc(var(--toggler-line-size) / 2);
left: 0;
right: 0;
transition: all .25s ease-out;
$num: 1;
@while $num <= $total {
&:nth-child(#{$num}) {
top: calc(var(--toggler-line-size) * #{$num} + (var(--toggler-line-size) * (#{$num} - 2)));
}
$num: $num + 1;
}
}
.input-toggler {
position: absolute;
left: -100%;
&:checked ~ .menu-toggler {
.menu-toggler__line:not(:first-child):not(:last-child) {
opacity: 0;
}
.menu-toggler__line:first-child,
.menu-toggler__line:last-child {
background-color: var(--toggler-color-hover);
}
.menu-toggler__line:first-child {
transform: translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg);
}
.menu-toggler__line:last-child {
transform: translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg);
}
}
}
// sig
.wrapper {
height: calc(100vh - 50px);
}
.sb-link {
display: flex;
height: 50px;
align-content: center;
align-items: center;
justify-content: center;
text-decoration: none;
color: #bb5555;
transition: background .3s;
}
.sb-link:hover,
.sb-link:focus,
.sb-link:active {
background: #f7f7f7;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.