How to create Accordion Menu | HTML & CSS Project - Frontend everything
Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Accordion Menu with the help of HTML and CSS Only! 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Accordion Menu that you can use in your own blog project. So it will look attractive.
Let's start making these amazing Accordion Menu Using HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used header and div tags for the containers.
<div class="wrapper">
<h1>Accordion Menu + Tooltip</h1>
<div class="wrap-1">
<input type="radio" id="tab-1" name="tabs">
<label for="tab-1"><div>tab one</div><div class="cross"></div></label>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium minima, excepturi quis maiores. Eaque quae, nam delectus explicabo, deserunt ipsum!</div>
</div>
<div class="wrap-2">
<input type="radio" id="tab-2" name="tabs">
<label for="tab-2"><div>tab two</div><div class="cross"></div></label>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium minima, excepturi quis maiores. Eaque quae, nam delectus <span class="tip" data-tip="Eaque quae, nam delectus explicabo, deserunt ipsum!">explicabo</span>,
deserunt ipsum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="tip" data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Mollitia</span> autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium
minima, excepturi quis maiores. Eaque quae, nam delectus explicabo, <span class="tip" data-tip="Lorem ipsum dolor sit amet.">deserunt</span> ipsum!</div>
</div>
<div class="wrap-3">
<input type="radio" id="tab-3" name="tabs">
<label for="tab-3"><div>tab three</div><div class="cross"></div></label>
<div class="questions">
<div class="question-wrap">
<input type="radio" id="question-1" name="question">
<label for="question-1"><div>question one</div> <div class="cross"></div></label>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.
</div>
</div>
<div class="question-wrap">
<input type="radio" id="question-2" name="question">
<label for="question-2"><div>question two</div> <div class="cross"></div></label>
<div class="content">
Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.
</div>
</div>
</div>
</div>
</div>
After the HTML we will design the Accordion Menu with CSS..
Output till now
CSS🎈( step - 2)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Space Mono', monospace;
color: #3E474F;
}
body {
overflow: hidden;
}
.wrapper {
max-width: 600px;
width: 100%;
margin: 10vh auto;
}
h1 {
font-size: 2em;
margin-bottom: 20px;
text-align:center;
}
input {
display: none;
}
label {
display: flex;
width: 100%;
height: 50px;
cursor: pointer;
border: 3px solid #3E474F;
user-select: none;
}
label div:first-child {
width: 100%;
line-height: 45px;
margin-left: 10px;
font-size: 1.2em;
}
.cross{
margin-right:15px;
margin-top:3px;
}
.cross:before,.cross:after {
content: '';
border-top: 2px solid #3E474F;
width: 15px;
display: block;
margin-top: 18px;
transition: 0.3s;
}
.cross:after {
transform: rotate(90deg);
margin-top: -2px;
}
.content {
box-sizing: border-box;
font-size: 0.9em;
margin: 10px 10px;
max-height: 0;
overflow: hidden;
transition: max-height, .5s;
}
input:checked ~ .content {
max-height: 400px;
transition: max-height, 1s;
}
input:checked ~ label .cross:before {
transform: rotate(180deg);
}
input:checked ~ label .cross:after {
transform: rotate(0deg);
}
.questions{
margin-top:20px;
max-height: 0;
overflow: hidden;
transition: max-height, .5s;
}
.questions label{
border:none;
box-shadow: none;
margin:0;
}
input:checked ~ .questions {
max-height: 400px;
border-bottom:2px solid #3E474F;
transition: 1s;
}
/*----------tool-tip------------*/
.tip {
color: #f03768;
cursor: help;
position: relative;
overflow: visible;
font-family: monospace;
font-size: 1.3em;
}
.tip:before,
.tip:after {
position: absolute;
opacity: 0;
z-index: -100;
transform: translateY(-30%);
transition: .4s;
}
.tip:before {
content: '';
border-style: solid;
border-width: 0.8em 0.5em 0 0.5em;
border-color: #3E474F transparent transparent transparent;
transform: translateY(-200%);
bottom:90%;
left:50%;
}
.tip:after {
content: attr(data-tip);
background: #3E474F;
color: white;
width: 150px;
padding: 10px;
font-size: 0.8em;
bottom: 150%;
left: -50%;
}
.tip:hover:before,
.tip:hover:after {
opacity: 1;
z-index: 100;
transform: scaleY(1);
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
.
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.