CSS Hamburger buttons is an element inside the Navbar that organizes the nav links when there is limited horizontal space, like on a mobile device. It is sometimes referred to as the hamburger menu.
<!-- Hamburger 1 -->
<label for="checkbox1" class="hamburger-1">
<input type="checkbox" id="checkbox1" />
<span class="line line-top"></span>
<span class="line line-middle"></span>
<span class="line line-bottom"></span>
</label>
<!-- Hamburger 2 -->
<label for="hamburger-2" class="hamburger-2">
<input type="checkbox" id="hamburger-2" />
<span class="line line-main"></span>
<span class="line line-split"></span>
</label>
<!-- Hamburger 3 -->
<div class="hamburger-4">
<input class="hamburger-4__cheeckbox" type="checkbox" />
<div class="hamburger-lines">
<span></span>
<span></span>
</div>
</div>
/* Hamburger 1 */
.hamburger-1 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
cursor: pointer;
}
.hamburger-1 #hamburger-1 {
display: none;
}
.hamburger-1 .line {
position: absolute;
width: 40px;
height: 2px;
background-color: #fff;
border-radius: 3px;
transition: transform 0.25s, opacity 0.35s;
}
.hamburger-1 .line-main::before,
.hamburger-1 .line-main::after,
.hamburger-1 .line-split::before,
.hamburger-1 .line-split::after {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
}
.hamburger-1 .line-top {
transform: translateY(-9px);
}
.hamburger-1 .line-bottom {
transform: translateY(9px);
}
.hamburger-1 #hamburger-1:checked ~ .line-top {
transform: rotate(45deg);
}
.hamburger-1 #hamburger-1:checked ~ .line-middle {
transform: translateX(16px);
opacity: 0;
}
.hamburger-1 #hamburger-1:checked ~ .line-bottom {
transform: rotate(-45deg);
}
/* Hamburger 2 */
.hamburger-2 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
cursor: pointer;
}
.hamburger-2 #hamburger-2 {
display: none;
}
.hamburger-2 .line {
position: absolute;
width: 40px;
display: inherit;
}
.hamburger-2 .line-main::before,
.hamburger-2 .line-main::after,
.hamburger-2 .line-split::before,
.hamburger-2 .line-split::after {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
}
.hamburger-2 .line-main::before {
transform: translateY(-10px);
}
.hamburger-2 .line-main::after {
transform: translateY(10px);
}
.hamburger-2 .line-split::before,
.hamburger-2 .line-split::after {
width: 30px;
transition: transform 0.5s, opacity 0.5s;
}
.hamburger-2 .line-split::after {
transform: translateX(10px);
}
.hamburger-2 #hamburger-2:checked ~ .line-main::before {
transform: rotate(45deg);
}
.hamburger-2 #hamburger-2:checked ~ .line-main::after {
transform: rotate(-45deg);
}
.hamburger-2 #hamburger-2:checked ~ .line-split::before {
transform: translateX(-10px);
opacity: 0;
}
.hamburger-2 #hamburger-2:checked ~ .line-split::after {
transform: translateX(20px);
opacity: 0;
}
/* Hamburger 3 */
.hamburger-4 {
position: relative;
width: 50px;
height: 50px;
cursor: pointer;
}
.hamburger-4 .hamburger-4__cheeckbox {
display: block;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
z-index: 2;
-webkit-touch-callout: none;
position: absolute;
opacity: 0;
}
.hamburger-4 .hamburger-lines {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 40px;
height: 12px;
}
.hamburger-4 span {
position: absolute;
display: block;
width: 100%;
height: 2px;
background-color: #fff;
border-radius: 1px;
transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}
.hamburger-4 span:first-of-type {
top: 0;
}
.hamburger-4 span:last-of-type {
bottom: 0;
}
.hamburger-4.active span:first-of-type,
.hamburger-4
.hamburger-4__cheeckbox:checked
+ .hamburger-lines
span:first-of-type {
transform: rotate(45deg);
top: 5px;
}
.hamburger-4.active span:last-of-type,
.hamburger-4
.hamburger-4__cheeckbox:checked
+ .hamburger-lines
span:last-of-type {
transform: rotate(-45deg);
bottom: 5px;
}
.hamburger-4.active:hover span:first-of-type,
.hamburger-4.active:hover span:last-of-type,
.hamburger-4.menu-icon:hover
.hamburger-4__cheeckbox:checked
+ .hamburger-lines
span:first-of-type,
.hamburger-4:hover
.hamburger-4__cheeckbox:checked
+ .hamburger-lines
span:last-of-type {
width: 40px;
}/* Hamburger 1 */
.hamburger-1 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
cursor: pointer;
#hamburger-1 {
display: none;
&:checked {
~ {
.line-top {
transform: rotate(45deg);
}
.line-middle {
transform: translateX(16px);
opacity: 0;
}
.line-bottom {
transform: rotate(-45deg);
}
}
}
}
.line {
position: absolute;
width: 40px;
height: 2px;
background-color: #fff;
border-radius: 3px;
transition: transform 0.25s, opacity 0.35s;
}
.line-main {
&::before {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
}
&::after {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
}
}
.line-split {
&::before {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
}
&::after {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
}
}
.line-top {
transform: translateY(-9px);
}
.line-bottom {
transform: translateY(9px);
}
}
/* Hamburger 2 */
.hamburger-2 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
cursor: pointer;
#hamburger-2 {
display: none;
&:checked {
~ {
.line-main {
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
.line-split {
&::before {
transform: translateX(-10px);
opacity: 0;
}
&::after {
transform: translateX(20px);
opacity: 0;
}
}
}
}
}
.line {
position: absolute;
width: 40px;
display: inherit;
}
.line-main {
&::before {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
transform: translateY(-10px);
}
&::after {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
transform: translateY(10px);
}
}
.line-split {
&::before {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
width: 30px;
transition: transform 0.5s, opacity 0.5s;
}
&::after {
content: "";
position: absolute;
width: inherit;
height: 2px;
background-color: #fff;
transition: transform 0.5s;
width: 30px;
transition: transform 0.5s, opacity 0.5s;
transform: translateX(10px);
}
}
}
/* Hamburger 3 */
.hamburger-4 {
position: relative;
width: 50px;
height: 50px;
cursor: pointer;
.hamburger-4__cheeckbox {
display: block;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
z-index: 2;
-webkit-touch-callout: none;
position: absolute;
opacity: 0;
&:checked {
+ {
.hamburger-lines {
span {
&:first-of-type {
transform: rotate(45deg);
top: 5px;
}
&:last-of-type {
transform: rotate(-45deg);
bottom: 5px;
}
}
}
}
}
}
.hamburger-lines {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 40px;
height: 12px;
}
span {
position: absolute;
display: block;
width: 100%;
height: 2px;
background-color: #fff;
border-radius: 1px;
transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
&:first-of-type {
top: 0;
}
&:last-of-type {
bottom: 0;
}
}
&:hover {
.hamburger-4__cheeckbox {
&:checked {
+ {
.hamburger-lines {
span {
&:last-of-type {
width: 40px;
}
}
}
}
}
}
}
}
.hamburger-4.active {
span {
&:first-of-type {
transform: rotate(45deg);
top: 5px;
}
&:last-of-type {
transform: rotate(-45deg);
bottom: 5px;
}
}
&:hover {
span {
&:first-of-type {
width: 40px;
}
&:last-of-type {
width: 40px;
}
}
}
}
.hamburger-4.menu-icon {
&:hover {
.hamburger-4__cheeckbox {
&:checked {
+ {
.hamburger-lines {
span {
&:first-of-type {
width: 40px;
}
}
}
}
}
}
}
}Author: alvarotrigo
Author: alvarotrigo