Control panel hamburger menu

http://www.developphp.com/view.php?tid=1419

by katalin_2003

HTML

<div id="cpBtn">
    <div></div>
    <div></div>
    <div></div>
</div>
<ul id="cp">
    <li><a class="cpL" id="cpl" href="#">LINK 1</a>
    </li>
    <li><a class="cpL" href="#">LINK 2</a>
    </li>
</ul>

CSS

html, body {
    margin: 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
a {
    color: #FFFFFF;
}
#cpBtn {
    float: left;
    position: fixed;
    /*	right: 20px;*/
    width: 20px;
    height: 24px;
    background: linear-gradient(#FFF, #DDD);
    border: #AAA 1px solid;
    border-radius: 2px;
    padding: 2px 5px;
    cursor: pointer;
    transition: border 0.3s linear 0s;
}
#cpBtn:hover {
    border: #06F 1px solid;
}
#cpBtn:hover div {
    background: #06F;
}
#cpBtn > div {
    width: 20px;
    height: 4px;
    background: #333;
    margin: 3px 0px;
    border-radius: 4px;
    transition: background 0.3s linear 0s;
}
#cp {
    position: fixed;
    left: -260px;
    top: 20px;
    width: 260px;
    height: 0px;
    background: #333;
    transition: left 0.3s linear 0s;
    text-align: center;
}

JavaScript

var cp1 = document.getElementById("cpBtn"),
    cp = document.getElementById("cp"),
    cpL = document.getElementById("cpl"),
    aCP = document.querySelectorAll("div, a.cpL");

function toggleCP() {
    //	var cp = document.getElementById("cp");
//    cp.style.height = window.innerHeight -200 + "px"; // replace this with a fixed size
        cp.style.height = 200 + "px";
    if (cp.style.left == "0px") {
        cp.style.left = "-300px";
    } else {
        cp.style.left = "0px";
    }
}

function closeCP(event) {
    console.log(cp.childNodes.length + " link clicked");
    cp.style.left = "-260px";
}

cp1.addEventListener('click', toggleCP);
//Javascrtipt
//aCP.addEventListener('click', closeCP);

//jQuery
$('.cpL').on('click', closeCP);