How To Create Accordion Menu using HTML & CSS

Hello Readers, Today in this article you are going to learn how to create an Accordion Menu using HTML and CSS. This type of accordion Menu is used on the websites for FAQ systems and etc. Basically, a web developer uses jQuery or different types of plugins to create these.

You easily create an Accordion Menu with HTML and CSS only without any jQuery or plugin then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.

Some information about this Accordion Menu

I used font awesome Icon with menu name and sub-menu hide normal time. when clicking the main menu name show the accordion menu.

Watch the video tutorial to create Accordion Menu

If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Accordion Menu step by step completely beautifully. So you can learn how to make this Accordion Menu. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.

Hopefully, the above video tutorial has helped you to create this video Accordion Menu. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

Accordion Menu | Source Codes

You have to create HTML & CSS File For this menu. After creating these files just paste the following codes into your file.

The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this Slider won’t appear. You’ve to download files from the given download button to use images also.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordion menu</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css">
    <!----Fontaesome CDN Link---->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>

  <div class="middle">
    <div class="menu">
      <li class="item" id="profile">
        <a href="#profile" class="btn"><i class="fas fa-user"></i>Profile</a>
        <div class="smenu">
          <a href="#">Posts</a>
          <a href="#">Picture</a>
        </div>
      </li>

      <li class="item" id="messages">
        <a href="#messages" class="btn"><i class="far fa-envelope"></i>messages</a>
        <div class="smenu">
          <a href="#">New</a>
          <a href="#">Sent</a>
          <a href="#">Spam</a>
        </div>
      </li>

      <li class="item" id="settings">
        <a href="#settings" class="btn"><i class="fas fa-cog"></i>Settings</a>
        <div class="smenu">
          <a href="#">Password</a>
          <a href="#">Language</a>
        </div>
      </li>

      <li class="item">
        <a href="#" class="btn"><i class="fas fa-sign-out-alt"></i>Logout</a>
      </li>

    </div>
  </div>

</body>
</html>

Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800&display=swap');

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
}
.middle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.menu{
	width: 300px;
	border-radius: 8px;
	overflow: hidden;
}
.item{
	border-top: 1px solid #2980b9;
	overflow: hidden;
}
.btn{
	display: block;
	padding: 16px 20px;
	background: #3498db;
	color: #fff;
	position: relative;
}
.btn:before{
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	background: #3498db;
	left: 20px;
	bottom: -7px;
	transform: rotate(45deg);
}
.btn i{
	margin-right: 10px;
}
.smenu{
	background: #333;
	overflow: hidden;
	transition: max-height 0.3s;
	max-height: 0;
}
.smenu a{
	display: block;
	padding: 16px 26px;
	color: #fff;
	font-size: 14px;
	margin: 4px 0;
	position: relative;
}
.smenu a:before{
	content: "";
	position: absolute;
	width: 6px;
	height: 100%;
	background: #3498db;
	top: 0;
	left: 0;
	transition: 0.3s;
	opacity: 0;
}
.smenu a:hover:before{
	opacity: 1;
}
.item:target .smenu{
	max-height: 10em;
}

now you’ve successfully created this Image Slider using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories