A Pen by jeremy alain

Thumbnail
This awesome code was written by Kaelnukem, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kaelnukem ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  jeremy alain</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <button id="dropbtn" onmouseover="dropdown()" onclick="dropdownclose()">hover me</button>
 
<button id="dropcontent1" onmouseover="conover1()">content-1</button>
<button id="dropcontent2">content-2</button><button id="dropcontent3">content-3</button><button id="dropcontent4">content-4</button><button id="dropcontent5">content-5</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Kaelnukem/a-pen-by-jeremy-alain-EXVZwY */
button {
    background: #17181c;
  border: 2px groove yellow;
  font: inherit;
  line-height: 1;
  margin: 8px;
  padding: 16px 32px;
  color: white;
  transition: 1s;
  
  
  
}

#dropbtn {
  position: absolute;
  top:0px;
  left: 50%;
}


#dropcontent1{
position: absolute;
  top: -100px;
  left: 50%;
  transition: 1s;
  z-index: -1;
  
}

#dropcontent2{
position: absolute;
  top: -150px;
  left: 50%;
  transition: 1s;
  z-index: -1;
  
}

#dropcontent3{
position: absolute;
  top: -200px;
  left: 50%;
  transition: 1s;
  z-index: -1;
  
}

#dropcontent4{
position: absolute;
  top: -250px;
  left: 50%;
  transition: 1s;
  z-index: -1;
  
}

#dropcontent5{
position: absolute;
  top: -300px;
  left: 50%;
  transition: 1s;
  z-index: -1;
  
}

/*Downloaded from https://www.codeseek.co/Kaelnukem/a-pen-by-jeremy-alain-EXVZwY */
var content1 = document.getElementById("dropcontent1").style;

var content2 = document.getElementById("dropcontent2").style;

var content3 = document.getElementById("dropcontent3").style;

var content4 = document.getElementById("dropcontent4").style;

var content5 = document.getElementById("dropcontent5").style;



function dropdown(){
  setTimeout(cont1, 100);
  setTimeout(cont2, 200);
  setTimeout(cont3, 300);
  setTimeout(cont4, 400);
  setTimeout(cont5, 500);
  function cont1(){
    
  content1.transform=" rotate(360deg)";
  content1.top = "50px";
     content1.left = "50.5%";
  content1.transition = "1s";
  }
  function cont2(){
  content2.transform=" rotate(-360deg)";
  content2.top = "100px";
     content2.left = "49.5%";
  content2.transition = "1s";
  }
  function cont3(){
  content3.transform=" rotate(360deg)";
  content3.top = "150px";
     content3.left = "50.5%";
  content3.transition = "1s";
  }
    function cont4(){
  content4.transform=" rotate(-360deg)";
  content4.top = "200px";
       content4.left = "49.5%";
  content4.transition = "1s";
    }
  function cont5(){
  content5.transform=" rotate(360deg)";
  content5.top = "250px";
     content5.left = "50.5%";
   content5.transition = "1s";
}
 
}

function dropdownclose(){
  setTimeout(con1c, 500);
  setTimeout(con2c, 400);
  setTimeout(con3c,300);
  setTimeout(con4c, 200);
  setTimeout(con5c, 100);
  function con1c(){
  content1.transform=" rotate(0deg)";
  content1.top = "-100px";
  content1.transition = "1s";
  }
    function con2c(){
  content2.transform=" rotate(0deg)";
  content2.top = "-150px";
    content2.transition = "1s";
    }
    function con3c(){
  content3.transform=" rotate(0deg)";
  content3.top = "-200px";
  content3.transition = "1s";
    }
    function con4c(){
  content4.transform=" rotate(0deg)";
  content4.top = "-250px";
  content4.transition = "1s";
    }
    function con5c(){
  content5.transform=" rotate(0deg)";
  content5.top = "-300px";
  content5.transition = "1s";
    }
  
}

Comments