Creating A Minimal Accordion Menu With Javascript

Category: Accordion , Javascript , Menu & Navigation | January 12, 2014
Views Total:2,777 views
Official Page:Go to website
Last Update:January 12, 2014


Creating A Minimal Accordion Menu With Javascript


A minimal accordion menu with smooth sliding animations built on top of javascript, a little similar to the mobile toggle menu.

How to use it:

Create the html for the toggle button and menu items.

<div class="navbar">
<input id="toggle" type="image" src="menu-icon.png" />
<div id="menu">

Include required javascript files in the page.

<script src="domready-min.js" type="application/javascript"></script>
<script type="text/javascript" src="main.js"></script>

Add some styles to the accordion menu.

.navbar {
background-color: gray;
padding: 5px;
.menuClosed {
display: none;
overflow: hidden;
background-color: gray;
.menuOpen {
display: block;
overflow: hidden;
height: 0px;
background-color: gray;
ul {
margin: 0;
padding: 0;
li {
border-bottom: 2px solid #fff;
color: #fff;

You Might Be Interested In:

Leave a Reply