.bar{ width:px; height:px; border:px solid #ccc; border-radius:%; position:fixed; top:px; right:px; z-index:; cursor:pointer; } .menu{ width:px; height:px; background-color:#ccc; position:absolute; transform:translated(-%,-%,); left:%; transition:all .s cubic-bezier(.,.,.) s } #menu{ top:%; } #menu{ top:%; } #menu{ top:%; } window.onload = function () { var menubar = document.getElementById("menubar"); var menu = document.getElementById("menu"); var menu = document.getElementById("menu"); var menu = document.getElementById("menu"); var i = ; menubar.onclick = function () { i++; if (i % == ) { menu.style.top = + "%"; menu.style.display = "none"; menu.style.top = + "%"; menu.style.transform = "translated(-%,) rotate(deg)"; menu.style.transform = "translated(-%,) rotate(deg)"; } else { menu.style.transform = "translated(-%,) rotate(deg)"; menu.style.top = + "%"; menu.style.top = + "%"; menu.style.display = "block"; } } }