menu 2

-

 <!DOCTYPE html>

<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div id="drop">
    <div id="ul">
      <a id="a" href="#">SECCION</a><br />
      <div></div>
      <a href="#">SECCION</a><br />
      <div></div>
      <a href="#">SECCION</a><br />
      <div></div>
      <a href="#">SECCION</a>
    </div>
  </div>
  <div class="menu" onclick="f()">
    <div class="mContainer">
      <div id="t"></div>
      <div id="out">
        <div id="i"></div>
      </div>
      <div id="b"></div>
    </div>
  </div>
</body>
<style>
      body {
    margin: 0;
    padding: 0;
    background:black;

}
.menu{
position: fixed;
    width: 60px;
    height: 60px;
     background:linear-gradient(to right,   #cc2b5e , #753a88 );
     top: 15px;
     left: 15px;
     border-radius: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 69999;
}
.menu .mContainer div{
    height: 2px;
    width: 25px;
    background-color: #fff;
    border-radius: 1px;
    transition: 0.7s;
}
.menu .mContainer div:nth-child(2){
    margin-top: 7px;
    margin-bottom: 7px;
}
#drop{
    background:linear-gradient(to right, #4776e6,  #8e54e9);
    width: 60px;
    height: 60px;
    position: fixed;
    border-radius: 100%;
    top: 15px;
    left: 15px;
    z-index: -6666675;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ul{
    display: none;
    transition: 1s;
    text-align: center ;
    
}
#ul a{
    text-decoration: none ;
    color: #fff;
}
#ul div{
    height: 15px;
}
</style>
<script>
  var count = false;
  function f(){
  if(count == false){
  var out = document.getElementById("out");
  var i = document.getElementById("i");
  out.style.transform = "rotate(-45deg)";
  i.style.transform = "rotate(450deg)";
  var b = document.getElementById("b");
  var t = document.getElementById("t");
  t.style.transform = "scale(0)";
  b.style.transform = "scale(0)";
  var drop = document.getElementById("drop");
  drop.style.width = "240px";
  drop.style.height = "240px";
  var ul = document.getElementById("ul");
  ul.style.display = "block";
  count = true;
  }else if(count == true){
  var drop = document.getElementById("drop");
  drop.style.width = "60px";
  drop.style.height = "60px";
  var out = document.getElementById("out");
  var i = document.getElementById("i");
  out.style.transform = "rotate(0deg)";
  i.style.transform = "rotate(0deg)";
  var b = document.getElementById("b");
  var t = document.getElementById("t");
  t.style.transform = "scale(1)";
  b.style.transform = "scale(1)";
  var ul = document.getElementById("ul");
  ul.style.display = "none";
  count = false;
  }
  }
</script>

</html>