How to Create Accordion Menus Using Simple HTML and CSS

#html #css #webdev #accordion

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.

Download Source Code

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;
}