Monalisha Mondol
Posted on April 1, 2021
You will learn how to create accordion menus using simple HTML and CSS programming code. In the meantime, I have shown how to make one more accordion design. But in that case, I have shown how to hide the text arbitrarily using CSS code. In this article, I have shown you how to hide and show menus.
Watch the video tutorial to know step by step
You can follow the video tutorial below to know the complete process of creating an accordion menu. In this case, I have used only HTML and CSS code to make it. If you want to know how to build it in full step by step and learn which programming code is used to create an element. But of course, you can follow the tutorial below.
How to create accordion menu using HTML & CSS
Below I have given the necessary HTML and CSS code to make it. If you want to make it yourself or use this menu elsewhere, you can do so very easily.
HTML Code:
<div class="wrapper">
<ui class="mainMenu">
<li class="item" id="account">
<a href="#account" class="btn"><i class="fa fa-user-circle"></i>My Account</a>
<div class="subMenu">
<a href="">Item-1</a>
<a href="">Item-2</a>
<a href="">Item-3</a>
</div>
</li>
<li class="item" id="about">
<a href="#about" class="btn"><i class="fa fa-address-card"></i>About</a>
<div class="subMenu">
<a href="">Item-1</a>
<a href="">Item-2</a>
</div>
</li>
<li class="item" id="support">
<a href="#support" class="btn"><i class="fa fa-info"></i>Support</a>
<div class="subMenu">
<a href="">Item-1</a>
</div>
</li>
<li class="item">
<a href="#" class="btn"><i class="fa fa-sign-out"></i>Log Out</a>
</li>
</ui>
</div>
CSS Code:
*{
margin: 0;
padding: 0;
font-family: 'lato';
list-style: none;
text-decoration: none;
}
body{
background-color: rgb(255, 255, 255);
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mainMenu{
width: 250px;
display: block;
border-radius: 10px;
overflow: hidden;
}
.item{
border-top: 1px solid #21a9e9;
overflow: hidden;
}
.btn{
display: block;
padding: 15px 20px;
background-color: #21a9e9;
color: #fff;
position: relative;
}
.btn:before{
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right:8px solid transparent;
border-top:10px solid #21a9e9;
right: 15px;
bottom: -10px;
z-index: 9;
}
.btn i {
margin-right: 7px;
margin-left: -5px;
font-size: 13px;
}
.subMenu{
background: #232b50;
overflow: hidden;
transition: max-height 0.7s;
max-height: 0;
}
.subMenu a{
display: block;
padding: 15px 20px;
color: #fff;
font-size: 14px;
border-bottom: 1px solid #394c7f;
position: relative;
}
.subMenu a:before{
content: '';
opacity: 0;
transition: opacity 0.3s;
}
.subMenu a:hover:before{
content: '';
position: absolute;
height: 0;
width: 6px;
left: 0;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-left: 11px solid #ffffff;
border-bottom: 24px solid transparent;
}
.subMenu a:after{
content: '';
opacity: 0;
transition: opacity 0.3s;
}
.subMenu a:hover:after{
content: '';
position: absolute;
height: 0;
width: 6px;
right: 0px;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-right: 11px solid #ffffff;
border-bottom: 24px solid transparent;
}
.subMenu a:hover{
background: #273057;
background: -moz-linear-gradient(top, #273057 0%, #273057 50%, #394c7f 51%, #394c7f 100%);
background: -webkit-linear-gradient(top, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
background: linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#273057', endColorstr='#394c7f',GradientType=0 );
transition: all 0.3s;
border-bottom: 2px solid #394c7f;
}
.subMenu a:last-child{
border:none;
}
.item:target .subMenu{
max-height: 10em;
}
If you like this design, please let me know in the comments. This will encourage me to create new designs.
Posted on April 1, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related