GeneratePress 7 Years Celebration! 🔥 Get up to $30 off 🔥

Create a Beautiful HTML 5 and Pure CSS Accordion Menu

Today's tutorial is about creating an accordion menu in pure CSS. I have seen many accordion menus, often come packed with javascript. But javascript is dangerous. They can increase the loading time of your blog massively. And such an accordion menu would precisely never load on browsers that have disabled javascript or on low-end browsers. the solution to all the problems is to make an accordion menu with incomplete CSS.

This stylish accordion menu can easily be used for WordPress sites as well as sites hosted on Blogger. This doesn't increase the load on your website and it works on HTML5 so that it can easily be customized.

Stylish Elegant Cool, Accordion Menu for WordPress and blogger

Features of HTML 5 and CSS Accordion Menu

  1. Stylish and elegant.
  2. HTML 5 Compatible
  3. Accordion Menu Easily integrates with WordPress & Blogger
  4. Simple and Clean code
  5. Pure CSS

Deploying the Accordion menu in Blogger Blogs

  • Search the following code in the blogger template editor
]]></b:skin>
  • Copy the CSS content from above and past before the searched code
/*Acco*/
.ac-container {
max-width: 400px;
}
.ac-container label {
height: 30px !important;
line-height: 21px !important;
font-size: 12px !important;
font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #fff;
background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%);
background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%);
background: linear-gradient(top,#fff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 );
box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1);
font-size: 12px;
height: 30px;
line-height: 20px;
}
.ac-container {
width: 100%;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label:hover {
background: #fff;
}
.ac-container input:checked + label,.ac-container input:checked + label:hover {
background: #f1f2f3;
color: #666;
text-shadow: 0 1px 1px rgba(255,255,255,0.6);
box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1);
height: 30px;
line-height: 21px;
font-size: 13px;
}
.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after {
background-image: url(../images/arrow_up.png);
}
.ac-container input {
display: none;
}
.ac-container article {
background: rgba(255,255,255,0.5);
margin-top: -1px;
overflow: hidden;
height: 0;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}
.ac-container article p {
font-style: normal;
color: #777;
line-height: 23px;
font-size: 10px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
font: normal normal 12px 'Open Sans';
}
.ac-container input:checked ~ article {
-webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small {
height: 140px;
}
.ac-container input:checked ~ article.ac-medium {
height: 180px;
}
.ac-container input:checked ~ article.ac-large {
height: 230px;
}
  • Now copy the HTML from above
  • Go to Blogger layouts – Add HTML/javascript widget and Paste the copied HTML content inside it.
  • To add this menu to the blogger blog page go to dashboard–> Create a new page, chose HTML View, and past the HTML content inside the blank page.
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" checked="">
<label for="ac-1">About us</label>
<article class="ac-small">
<p>Sample description.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio">
<label for="ac-2">How we work</label>
<article class="ac-medium">
<p>Sample description.</p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3">References</label>
<article class="ac-large">
<p>Sample description.</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio">
<label for="ac-4">Contact us</label>
<article class="ac-large">
<p>Sample description.</p>
</article>
</div>
</section>

You are Good to go. Have a cup of coffee.

Previous Article
Top Google AdSense Approval Guidelines
Next Article
Further, Optimize the Performance of Your Site Using a CDN

Thanks for choosing to comment on this article. A name and email address are required to post a comment. The email address is not publicly visible or shared. Please keep in mind that comments are moderated according to our comment policy.

Leave a Comment