Traditionally, developers would use JS to achieve a toggle menu, did anyone have a thought to design the toggle menu with pure CSS? There we go! Here is the solution.
Every website will have a menu that holds the data of the entire website navigation. Now, will take one menu in the header part and design the toggle functionality only with CSS. First will start with building HTML and then followed by CSS
HTML for the functionality
The approach I have chosen for this toggle functionality is taking the help of the input type checkbox so that we can write the functionality by taking whether the input is checked or not.
Here is my HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avoid white space caused by CSS</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<div class="side-1">
<h1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos
autem quis eligendi perferendis, consectetur tenetur temporibus vero,
blanditiis minima officiis amet quod iste dolor error, commodi
expedita! Numquam, molestiae inventore.
</p>
</div>
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle" />
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item">
<a href="#" class="navigation__link"><span>01</span>About</a>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link"
><span>02</span>Lorem ipsum</a
>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link"
><span>03</span>Lorem ipsum</a
>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link"
><span>04</span>Lorem ipsum</a
>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link"
><span>05</span>Lorem ipsum</a
>
</li>
</ul>
</nav>
</div>
</header>
<main>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
possimus eveniet molestiae, architecto error asperiores eum nobis nisi
ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
obcaecati possimus eveniet molestiae, architecto error asperiores eum
nobis nisi ea earum!
</p>
</main>
<footer>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error rerum,
dolorum dolor, dolores doloremque deserunt itaque molestiae aliquam at
cum, beatae odit repellat suscipit amet corporis! Officia sequi totam
quisquam.
</p>
</footer>
</body>
</html>
CSS for the functionality
header {
background-color: #050d57;
color: #fff;
font-size: 20px;
padding: 50px;
}
.side-1 {
max-width: 60%;
}
header ul li {
list-style-type: none;
padding-bottom: 15px;
}
.header {
background-image: linear-gradient(
to right bottom,
rgba(56, 215, 236, 0.8),
rgba(196, 245, 245, 0.8)
);
position: relative;
}
.navigation__checkbox {
display: none;
}
.navigation__button {
background-color: #fff;
height: 7rem;
width: 7rem;
position: fixed;
top: 6rem;
right: 6rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer;
}
.navigation__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 6.5rem;
right: 6.5rem;
background-image: radial-gradient(#081692, #061599);
z-index: 1000;
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation__nav {
position: fixed;
top: 0;
left: 0;
z-index: 1500;
opacity: 0;
width: 0;
transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navigation__list {
list-style: none;
text-align: center;
width: 100%;
}
.navigation__item {
margin: 1rem;
}
.navigation__link:link,
.navigation__link:visited {
display: inline-block;
font-size: 2rem;
font-weight: 300;
padding: 1rem 2rem;
color: #fff;
text-decoration: none;
text-transform: uppercase;
background-image: linear-gradient(
90deg,
transparent 0%,
transparent 50%,
#fff 50%
);
background-size: 220%;
transition: all 0.4s;
}
.navigation__link:link span,
.navigation__link:visited span {
margin-right: 1.5rem;
display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
background-position: 100%;
color: #050d57;
transform: translateX(1rem);
}
.navigation__checkbox:checked ~ .navigation__background {
transform: scale(80);
}
.navigation__checkbox:checked ~ .navigation__nav {
opacity: 1;
width: 100%;
}
.navigation__icon {
position: relative;
margin-top: 3.5rem;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block;
}
.navigation__icon::before,
.navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all 0.2s;
}
.navigation__icon::before {
top: -0.8rem;
}
.navigation__icon::after {
top: 0.8rem;
}
.navigation__button:hover .navigation__icon::before {
top: -1rem;
}
.navigation__button:hover .navigation__icon::after {
top: 1rem;
}
//here is the actual logic behind the scenes
.navigation__checkbox:checked + .navigation__button .navigation__icon {
background-color: transparent;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg);
}
main {
display: flex;
padding: 30px 50px;
background: #faf8f8;
flex-wrap: wrap;
}
main p {
margin-right: 32px;
flex: 0 0 30%;
}
footer {
background-color: #050d57;
color: #fff;
padding: 50px;
}Here are the final results.
Conclusion:
Finally, we are done with designing a toggle menu with pure CSS. So guys go and have a trial by yourself. Happy learning.
21 likes
Add to read list
Comments