In this article, you will learn how to create a Responsive Accordion Menu using HTML and CSS. Earlier I shared many more Accordion Menu designs with you. But they were not responsive. This Accordion Menu is fully responsive so you can use it directly in your project.
The most important point is that the sub-menu is used here which was not the case in other cases. You can store a lot of information in this sub-menu. Only HTML and CSS are used to create it. Checkbox has been used to execute this Responsive Accordion Menu.
Responsive Accordion Menu
Accordion Menu is used on various websites. This type of section is used on different websites to pre-prepare different types of answers. It is designed to be used perfectly on the website. Here I have basically used three headings. When you click on those headings, you will see the information contained in those headings.
Below is a demo that will help you learn how this CSS Accordion Menu works. Here you will find the required source code which you can copy directly and use in your own work.
As you can see I have given three or more headings on the webpage. Each heading is accompanied by a large amount of hidden information. When you click on the heading, you will see that information. I have used sub-headings in the third heading below. In other words, if you click on that heading, you will see many more headings in it.
One plus and minus icon have been added to each heading. Plus icons can be seen here when the content is hidden. When the content is available, minus icons can be found here.
How to Create Accordion Menu using HTML CSS
Now is the time to create the Responsive Accordion Menu. For this, you need to have an idea about basic HTML and CSS. Since the basic code is used here, I did not share it step-by-step. I have shared many designs before where I have shared step-by-step tutorials.
If you are a beginner then you can follow that design. First, create an HTML and CSS file. Then add the following codes to that file.
HTML Code(index.html):
The following code is the HTML code that adds the basic structure and tests of this simple Accordion Menu. You copy the following HTML code and add it to your HTML file. Be sure to rename your HTML file using index.html.
<div class=”content”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium minima, excepturi serunt ipsum!</div>
<div class=”content”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum Eaque quae, nam delectus <span class=”tip” data-tip=”Eaque quae, nam delectus explicabo, deserunt ipsum!”>explicabo</span>,
excepturi quis maiores. Eaque quae, nam delectus explicabo, <span class=”tip” data-tip=”Lorem ipsum dolor sit amet.”>deserunt</span> ipsum!</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis Voluptate, quasi.
Ipsam atque, soluta doloribus distinctio saepe labore praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code(style.css):
The code below is CSS which has been used to design this Responsive Accordion Menu. You copy these codes and add them to your CSS file.
Be sure to use the rename style.css of your CSS file. There is no need to attach the CSS file separately to the HTML file. I have already added the required code.
* {
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;
}
input {
display: none;
}
label {
display: flex;
border: 3px solid #0d82e9;
user-select: none;
width: 100%;
height: 50px;
cursor: pointer;
}
label div:first-child {
margin-left: 10px;
font-size: 1.2em;
width: 100%;
line-height: 45px;
}
.cross{
margin-right:15px;
margin-top:3px;
}
.cross:before,.cross:after {
display: block;
margin-top: 18px;
transition: 0.3s;
content: ”;
border-top: 2px solid #3E474F;
width: 15px;
}
.cross:after {
transform: rotate(90deg);
margin-top: -2px;
}
.content {
box-sizing: border-box;
font-family: sans-serif;
max-height: 0;
overflow: hidden;
font-size: 1.1em;
margin: 10px 10px;
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;
}
Hopefully, you have no problem creating this Accordion Menu HTML CSS using the above HTML and CSS codes. If you have problems, you can use the download button below. Be sure to comment on how you like this Responsive Accordion Menu.
