DEV Community

Cover image for How to Create Accordion Menus Using Simple HTML and CSS
Monalisha Mondol
Monalisha Mondol

Posted on

How to Create Accordion Menus Using Simple HTML and CSS

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>

Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

If you like this design, please let me know in the comments. This will encourage me to create new designs.

Top comments (3)

Collapse
 
raddevus profile image
raddevus

Very nice article. Informative and helpful with nice examplel

Collapse
 
monalishamondol profile image
Monalisha Mondol

Thank you 😍😍

Collapse
 
alvaromontoro profile image
Alvaro Montoro

The design looks really neat.

Are you open to comments over the code/accessibility?