Accordion Menu Design Using html and css
Learn How to make a Accordion Menu Design With click animation using html and css . latest page UI design with HTML and CSS. Web site Design Tutorial
Video Tutorial
Google Fonts Link Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accordion-memu">
<div class="accordion">
<h1>Frequently Asked Questions?</h1>
<hr>
<div class="container">
<div class="label">What is html?</div>
<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, assumenda minima non, exercitationem recusandae fugiat eligendi totam provident dicta, corporis nam aperiam iure? Fugiat reprehenderit aperiam odit commodi quas ex!</div>
</div>
<hr>
<div class="container">
<div class="label">What is css?</div>
<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, assumenda minima non, exercitationem recusandae fugiat eligendi totam provident dicta, corporis nam aperiam iure? Fugiat reprehenderit aperiam odit commodi quas ex!</div>
</div>
<hr>
<div class="container">
<div class="label">What is JavaScript?</div>
<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, assumenda minima non, exercitationem recusandae fugiat eligendi totam provident dicta, corporis nam aperiam iure? Fugiat reprehenderit aperiam odit commodi quas ex!</div>
</div>
<hr>
<div class="container">
<div class="label">What is Bootstrap?</div>
<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, assumenda minima non, exercitationem recusandae fugiat eligendi totam provident dicta, corporis nam aperiam iure? Fugiat reprehenderit aperiam odit commodi quas ex!</div>
</div>
<hr>
<div class="container">
<div class="label">What is NodeJs?</div>
<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, assumenda minima non, exercitationem recusandae fugiat eligendi totam provident dicta, corporis nam aperiam iure? Fugiat reprehenderit aperiam odit commodi quas ex!</div>
</div>
</div>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,300&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #003170;
font-family: 'Rubik', sans-serif;
}
h1{
text-align: center;
}
.accordion{
width: 800px;
margin: 90px auto;
color: #999;
background-color: white;
padding: 45px 45px;
}
.accordion .container{
position: relative;
margin: 10px 10px;
}
.accordion .label{
position: relative;
padding: 10px 0;
font-size: 30px;
color: #000;
cursor: pointer;
}
.accordion .label::before{
content: '+';
position: absolute;
color: #000;
top: 50%;
right: -5px;
font-size: 30px;
transform: translateY(-50%);
}
.accordion .content {
position: relative;
background: white;
height: 0;
font-size: 20px;
text-align: justify;
width: 700px;
overflow: hidden;
transition: 0.5s;
}
.accordion hr{
width: 100%;
margin-left: 0;
border: 1px solid #999;
}
.accordion .container.active .content{
height: 150px;
}
.accordion .container.active .label::before{
content: '-';
font-size: 30px;
}
JavaScript CODE
The Full from of JS is JavaScript. It explains how to HTML elemnts work. For web designers, it is powerfull tool to control of the web pages t demonstrate how they should be worked.
const accordion = document.getElementsByClassName('container');
for (i=0;i<accordion.length;i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active')
})
}
Posts
No comments: