Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 9, 2021 11:09 am GMT

Awesome accordion menu using only HTML & CSS

In this article, I am going to show you how to easily create an accordion menu bar using only simple HTML and CSS programming code. The accordion menu is a modern design that allows you to organize a large amount of content in a small space. Currently, the demand for this type of design has increased a lot. Depending on that demand, I have designed a beautiful accordion menu in this article.

Here I have tried to explain to you step by step how it is made. In this case, six menus have been used and some amount of content is written inside each menu. Under normal circumstances, only menus can be seen along the perpendicular. When you click on a menu, all the text associated with this menu will appear. You can change the menu and its information according to your needs.

This accordion menu bar is structured using HTML code and designed using CSS code. You can follow the video tutorial below for additional information. If you want to know and learn his step by step, you can definitely watch the video below.

Demo: Click Here

Download: Click Here

Hopefully from another video tutorial, you have learned how to design this accordion menu. If you want to make it yourself, follow the steps below. Below I have shared with you the easy way to make it using three methods.

Create HTML and css files

First of all, you have to create an HTML and CSS file before creating it. Then copy the structure below and paste it into the HTML file. Of course, you will attach your CSS file to the HTML file. You can also just create an HTML file and add CSS code to it using style tags.

<!DOCTYPE html><html><head>    <title>Accordion Menu</title><link rel="stylesheet" href="stylesheet.css"></head><body>      Add Html Code</body><html>
Enter fullscreen mode Exit fullscreen mode

Add HTML code to create menus and text

The following programming codes are the HTML programming codes that have been used to construct this accordion menu. Copy and paste your programming codes into the above structure where the add HTML code is written.

<!DOCTYPE html><html><head>    <title>Accordion Menu</title><link rel="stylesheet" href="drop.css"></head><body>    <!-- html code-->    <h1>Pure CSS Accordion Menu</h1>    <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.            </div>        </div>                                                                                                                                    /*position: absoluteright: 10px;top: 20px;z-index: 10-webkit-transition: all 0.3s ease-in-moz-transition: all 0.3s ease-in-o-ms-transition:all 0.3s ease-in-out-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;*/        <!-- 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.            </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.            </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.            </div>        </div>                                                                                                                                    /*position: absoluteright: 10px;top: 20px;z-index: 10-webkit-transition: all 0.3s ease-in-moz-transition: all 0.3s ease-in-o-ms-transition:all 0.3s ease-in-out-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;*/        <!-- 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.            </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.            </div>        </div>    </div></body></html>
Enter fullscreen mode Exit fullscreen mode

Add CSS code to design this accordion menu

The following programming codes are CSS codes that have helped to design this accordion menu beautifully. The menu has been made fully functional using this CSS code. In this case, white color has been used in the background and blue color has been used in the menus. When you click on the menus, the tests under the menus will appear. The CSS code used for this is given below. You copy the CSS codes below then paste them in the upper structure where add CSS code is written.

/* now add css code */body{    background: #ecf0f1;    font-family: 'source sans pro';    font-weight: 400;}h1{    font-size: 35px;    color: #2c97de;    text-align: center;}.accordionMenu{    width: 500px;    margin: 0 auto;}.accordionMenu input[type=radio]{    display: none;}.accordionMenu label{    display: block;    height: 50px;    line-height: 47px;    padding: 0 25px 0 10px;    background: #2c97de;    font-size: 18px;    color: #fff;    position: relative;    cursor: pointer;    border-bottom: 1px solid #e6e6e6;}                                                                                                                                    /*position: absoluteright: 10px;top: 20px;z-index: 10-webkit-transition: all 0.3s ease-in-moz-transition: all 0.3s ease-in-o-ms-transition:all 0.3s ease-in-out-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;*/.accordionMenu label::after{    display: block;    content: "";    width: 0;    height: 0;    border-style: solid;    border-width: 5px 0 5px 10px;    border-color: transparent transparent transparent #ffffff;    position: absolute;    right: 10px;    top: 20px;    z-index: 10;    -webkit-transition: all 0.3s ease-in-out;    -moz-transition: all 0.3s ease-in-out;    -ms-transition:all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}.accordionMenu .content{    max-height: 0;    height: 0;    overflow: hidden;    -webkit-transition: all 2s ease-in-out;    -moz-transition: all 2s ease-in-out;    -o-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;                                                                                                                                    /*position: absoluteright: 10px;top: 20px;z-index: 10-webkit-transition: all 0.3s ease-in-moz-transition: all 0.3s ease-in-o-ms-transition:all 0.3s ease-in-out-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;*/    padding: 20px 10px;}.accordionMenu input[type=radio]:checked + label:after{    -webkit-transform: rotate(90deg);    -moz-transform: rotate(90deg);    -ms-transform: rotate(90deg);    -o-transform: rotate(90deg);    transform: rotate(90deg);}.accordionMenu input[type=radio]:checked + label + .content{    max-height: 2000px;    height: auto;}
Enter fullscreen mode Exit fullscreen mode

Using these three methods you can easily create this accordion menu. No JavaScript programming code was used. It is designed using CSS code only.
You can watch the video tutorial above to know more. You can also use the button above to watch it live. If you have any problems creating this menu. But of course, you can ask me by commenting. I will try to help you in every way.


Original Link: https://dev.to/backlinknweb/awesome-accordion-menu-using-only-html-css-1c7l

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To