delvinkrasniqi · March 17, 2020 21:39
diff --git a/9 dots Menu Icon b/9 dots Menu Icon
 <style>
 #wrapper{
    display: inline-block;
    position: relative;
    margin: 80px;
    cursor: pointer;
    width: 25px;
    height: 25px;
 }

 .circle{
    width: 25px;
    height: 25px;
    position: relative;
    transition: .3s ease-in-out;
    margin: auto;
 }
 .close{
    width: 20px;
    height: 20px;
    margin: auto;
    transition: .3s ease-in-out;
 }
 .line1,.line2,.line3,.line4,.line5,.line6,.line7,.line8,.line9{
    height: 5px;
    width: 5px;
    background: white;
    /* border-radius: 8px; */
    transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55 ) 0.35s;
    position: absolute;
 }
 .line1{
    top: 0;
    left: 0;
 }
 .line2{
    top: 0;
    left: 50%;

 }
 .line3{
    top: 0;
    left: 100%;
 }
 .line4{
    top: 50%;
    left: 0;
 }
 .line5{
    top: 50%;
    left: 50%;
 }
 .line6{
    top: 50%;
    left: 100%;
 }

 .line7{
    top: 100%;
    left: 0;
 }
 .line8{
    top: 100%;
    left: 50%;
 }
 .line9{
    top: 100%;
    left: 100%;
 }
 </style>

 <html>
 <div id="wrapper">
          <div class="circle icon">
              <span class="line1"></span>
              <span class="line2"></span>
              <span class="line3"></span>
            
            <span class="line4"></span>
              <span class="line5"></span>
              <span class="line6"></span>
            
            <span class="line7"></span>
              <span class="line8"></span>
              <span class="line9"></span>
          </div>
      </div>
 </html>

 <js>
 <script>
        jQuery("#wrapper").click(function(){
            jQuery(".icon").toggleClass("close");
        });
        </script>
 </js>