Responsive Accordion Menu
Responsive Accordion Menu using HTML and CSS.
Details: Responsive Accordion Menu
A responsive accordion menu is a menu that adjusts its layout to the screen size of the browser it’s being viewed on. In other words, when a user opens the menu in a browser, he can see the entire menu at once. However, if that user starts to scroll his browser window, the menu will adjust itself to show only part of the contents at a time. Creating a responsive accordion menu requires an understanding of both HTML and CSS and some JavaScript knowledge.
While HTML and CSS are foundational to creating any web page, HTML does not have any pre-set features— it merely defines the structure for additional code to construct a web page. Additional code can then define what happens on a page when users interact with it. This additional code is commonly referred to as “CSS”— or Cascading Style Sheets— and defines how elements on the page look and behave. In this case, HTML + CSS + JavaScript = a responsive accordion menu!
A responsive accordion menu allows website owners greater flexibility in designing interfaces as users can choose how much information they wish to see at once without taking extra steps like scrolling or mousing over dropdown menus again and again till all info appears in viewable spaces.
This program is only possible with HTML <input type=”radio”> and <label> tag. You can also use <input type=” checkbox”> to create this accordion. To be able to create a responsive accordion menu, you need to create an HTML file and a CSS file. Copy and paste the codes below for each of the files.
HTML Code: Responsive Accordion Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Responsive Accordion Menu | DuraScripts</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Accordion Heading One -->
<div class="parent-tab">
<input type="radio" name="tab" id="tab-1" checked>
<label for="tab-1">
<span>Accordion Heading One</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7019695460453069"
crossorigin="anonymous"></script>
<!-- First Point Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7019695460453069"
data-ad-slot="2810488486"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<!-- Accordion Heading Two -->
<div class="parent-tab">
<input type="radio" name="tab" id="tab-2">
<label for="tab-2">
<span>Accordion Heading Two</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
</div>
</div>
<!-- Accordion Heading Three -->
<div class="parent-tab tab-3">
<input type="radio" name="tab" id="tab-3">
<label for="tab-3" class="tab-3">
<span>Accordion Heading Three</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<!-- Sub Heading One -->
<div class="child-tab">
<input type="checkbox" name="sub-tab" id="tab-4">
<label for="tab-4">
<span>Sub Heading One</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7019695460453069"
crossorigin="anonymous"></script>
<!-- First Point Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7019695460453069"
data-ad-slot="2810488486"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<!-- Sub Heading Two -->
<div class="child-tab">
<input type="checkbox" name="sub-tab" id="tab-5">
<label for="tab-5">
<span>Sub Heading Two</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
</div>
</div>
</div>
</div>
<!-- Accordion Heading Four -->
<div class="parent-tab">
<input type="radio" name="tab" id="tab-6">
<label for="tab-6">
<span>Accordion Heading Four</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7019695460453069"
crossorigin="anonymous"></script>
<!-- First Point Ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7019695460453069"
data-ad-slot="2810488486"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
</div>
</body>
</html>
CSS CODE: Responsive Accordion Menu
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
::selection{
background: rgb(0,123,255,0.3);
}
.wrapper{
max-width: 600px;
padding: 0 20px;
}
.wrapper .parent-tab,
.wrapper .child-tab{
margin-bottom: 8px;
border-radius: 3px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}
.wrapper .parent-tab label,
.wrapper .child-tab label{
background: #007bff;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-radius: 3px;
position: relative;
z-index: 99;
transition: all 0.3s ease;
}
.wrapper .parent-tab label:hover{
background: #006fe6;
}
.parent-tab input:checked ~ label,
.child-tab input:checked ~ label{
border-radius: 3px 3px 0 0;
background: #006fe6;
}
.wrapper label span{
color: #fff;
font-size: 18px;
font-weight: 500;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label span{
font-size: 17px;
}
.parent-tab label .icon{
position: relative;
height: 30px;
width: 30px;
font-size: 15px;
color: #007bff;
display: block;
background: #fff;
border-radius: 50%;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label .icon{
height: 27px;
width: 27px;
}
.parent-tab label .icon i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent-tab input:checked ~ label .icon i:before,
.child-tab input:checked ~ label .icon i:before{
content: '\f068';
}
.wrapper .parent-tab .content,
.wrapper .child-tab .sub-content{
max-height: 0px;
overflow: hidden;
background: #fff;
border-radius: 0 0 3px 3px;
transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,
.child-tab input:checked ~ .sub-content{
max-height: 100vh;
}
.tab-3 input:checked ~ .content{
padding: 15px 20px;
}
.parent-tab .content p,
.child-tab .sub-content p{
padding: 15px 20px;
font-size: 16px;
}
.child-tab .sub-content p{
font-size: 15px;
}
input[type="radio"],
input[type="checkbox"]{
display: none;
}
Recommended: Responsive Contact Us Form using HTML and CSS
