The accordion menu is a kind of modern design that is currently widely used. You can easily create a beautiful accordion menu using HTML and CSS code.
This type of section is mainly used for FAQs. This is the best design for sorting any kind of information step by step. In this article, I have basically tried to explain all the necessary code and video to make a beautiful accordion menu.
FAQ Accordion Menu HTML
HTML programming code has been used to structure these menus and CSS programming code has been used to design them. You can create such menus in different designs such as horizontal and side by side.
It will basically help to keep a lot of information neatly arranged in a small space. You can follow the video tutorial given below. There you will learn how to make it step by step.
If you want to learn which programming code has been used to create an element, follow the tutorial below. In this tutorial, I have shared how to create this accordion menu in 5 steps.
Step 1: Create backgrounds and titles
First of all, the background and title have been made to make it. The title TK is beautifully designed using the color blue. The background color has been whitewashed with it. You can change the color to your liking. If you want to use a picture in the background then you can do it in a very nice way.
<!-- html code-->
<!DOCTYPE html>
<html>
<head>
<title>Accordion Menu</title>
<link rel="stylesheet" href="drop.css">
</head>
<body>
<h1>Pure CSS Accordion Menu</h1>
</body>
</html>
<!-- CSS code-->
body{
background: #ecf0f1;
font-family: 'source sans pro';
font-weight: 400;
}
h1{
font-size: 35px;
color: #2c97de;
text-align: center;
}
Step 2: Add the necessary menus and text content
The following programming codes have been used to create the menus and the information contained in this accordion menu. There are basically 6 menus made here and there is space for necessary information under it.
You can increase the number of these menus if you want. For that, you notice your own programming code nicely. If you look there, you will see that I have used some code to increase each menu bar. I have highlighted those codes with the help of comments. You copy those codes then paste them below. Change the level and ID number with it. The radio button is used for each menu bar in this menu bar. As a result, you will not be able to open many contents at once.
You can open the content one by one. When you click on a menu, you will now see content related to that menu. Then if you click on the menu below, the top content will be hidden automatically. The radio button is used to do this.
<div class="accordionMenu">
<!-- 1st menu -->
<input type="radio" name="trg1" id="acc1" checked="checked">
<label for="acc1">Quisquam Doloremeos</label>
<div class="content">
<div class="inner">
It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
</div>
</div>
<!-- 2nd menu -->
<input type="radio" name="trg1" id="acc2">
<label for="acc2">Fugiat esse oditanimi</label>
<div class="content">
<div class="inner">
It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
</div>
</div>
<!-- 3rd menu -->
<input type="radio" name="trg1" id="acc3">
<label for="acc3">Quibusdam adipisci</label>
<div class="content">
<div class="inner">
It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
</div>
</div>
<!-- 4th menu -->
<input type="radio" name="trg1" id="acc4">
<label for="acc4">Harum animi placeat</label>
<div class="content">
<div class="inner">
It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
</div>
</div>
<!-- 5th menu -->
<input type="radio" name="trg1" id="acc5">
<label for="acc5">Obcaecati Quibusdam</label>
<div class="content">
<div class="inner">
It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
</div>
</div>
<!-- 6th menu -->
<input type="radio" name="trg1" id="acc6">
<label for="acc6">Modi excepturi</label>
<div class="content">
<div class="inner">
It is a demo text. In this video, I am going to show you how to build a beautiful accordion Menu using simple HTML and CSS programming code.Hopefully by watching the video you have learned how to make it. You can easily download the required source code by clicking on the download link in the description box.
</div>
</div>
</div>
Step 3: Design menus beautifully using CSS code
The following programming codes are common CSS programming codes. Which has been used to fit and design this accordion menu enough. Here the menubars are painted blue and the background of the content is painted white. The text in the content here is painted blue and 25 px and 10px borders are used on both sides, respectively.
.accordionMenu{
width: 500px;
margin: 0 auto;
}
.accordionMenu input[type=radio]{
display: none;
}
.accordionMenu label{
background: #2c97de;
font-size: 18px;
color: #fff;
position: relative;
cursor: pointer;
display: block;
height: 50px;
line-height: 47px;
padding: 0 25px 0 10px;
border-bottom: 1px solid #e6e6e6;
}
Step 4: Design text content and block display
The following programming codes have been used primarily to block the display. Normally the menus in this menu bar will be visible and the contents will be hidden inside that menu.
The following programming codes have been used to create this situation. For this, the position is absolute and the background is blocked. As a result, the contents are completely hidden.
.accordionMenu label::after{
display: block;
content: "";
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
width: 0;
height: 0;
right: 10px;
top: 20px;
z-index: 10;
-moz-transition: all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordionMenu .content{
max-height: 0;
height: 0;
overflow: hidden;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.accordionMenu .content .inner{
font-size: 1.2rem;
color: #2c97de;
line-height: 1.5;
background: white;
padding: 20px 10px;
}
Step 5: Add some CSS code to make the accordion menus work properly
This is the last step in creating this accordion menu. Here, some amount of CSS code has been used to make the accordion menu functional. When you click on a menu, you can see the content under that menu. Some special CSS programming code has been used to do this. In this case, the maximum height of the content is 1000px and the normal height is automatic.
Also, some animations have been used here. An Android at the end of each menu bar. When you click on someone or on the menu bar, the account will rotate at a 90-degree angle.
.accordionMenu input[type=radio]:checked + label:after{
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordionMenu input[type=radio]:checked + label + .content{
max-height: 2000px;
height: auto;
}
Hopefully, this tutorial has helped you to learn how to create this accordion menu bar. If you want to know and learn completely, you can follow the video tutorial above. If you want to see the live demo, you can use the demo button above. HTML and CSS programming were used to make it.
You can download the code to make FAQ Accordion Menu completely free by clicking on the download button above. Hope you like this accordion menu section. If you encounter any problems while making it, you can definitely let me know in the comments. I will help you completely.
