mercredi 7 décembre 2016

Keyframes or JScript for dropdown menu

I have a code like this:

HTML:

<body>
<div id="container" onclick="dropright()">
    <div id="menuBar"></div>
</div>

CSS:

*{
margin: 0px;
}

#container{
    width: 150px;
    height: 600px;
    left: -75px;
    position: relative;
}

#menuBar{
    width: 150px;
    height: 100%;
    position: absolute;
    float: left;
    background-color: red;
}

JS:

function dropright() {
    var pos = 0; 
    var menu = document.getElementById("menuBar");
    var t = setInterval(move, 10);
    function move() {
        if(pos >= 75) {
            clearInterval(t);
        }
        else{
            pos += 1;
            menu.style.left = pos + "px";
        }
    }
};

I would like to make my menuBar appear from left on container click. Also I would like to make it disappear the same way. But this does nothing. Should I use JS for this or keyframes?

à

Aucun commentaire:

Enregistrer un commentaire