slide in/out menu example

HTML

<li class="menu"><a href="#about" id="mainmenu">Menu<span class="box-shadow-menu"></span></a> 
    </ul>
    <ul class="sub closed" id="sub">
        <li><a href="#">Dashboard</a>
        </li>
        <li><a href="#">My Profile</a>
        </li>
        <li><a href="#">Settings</a>
        </li>
        <li><a href="#">Help</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Logout</a>
        </li>
    </ul>
</li>

CSS

.sub {
    position: absolute;
}
.open {
    left:0;
    -webkit-transition: all 5000ms cubic-bezier(0.680, 0, 0.265, 1);
    -webkit-transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.closed {
    left:-100%;
    -webkit-transition: all 5000ms cubic-bezier(0.680, 0, 0.265, 1);
    -webkit-transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 5000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

JavaScript

var menubtn = document.getElementById('mainmenu');
var sub = document.getElementById('sub');
menubtn.addEventListener('click', function () {
    var closed = sub.className.indexOf('closed') !== -1;
    if (closed) {
        sub.className = sub.className.replace('closed', 'open');
    } else {
        sub.className = sub.className.replace('open', 'closed');
    }
});