Creating A Minimal Accordion Menu With Javascript

Preview:

Description:

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>
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
</div>

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;
}