How to make hover circular menu to toggle with javascript?

I need to make this circular menu with toggle instead of hover
i’ve tried
but still it’s not working and my circle position is really bad.

and this menu is from

My CSS :

    background-color: #f273ba;
    font-family: tahoma;
    overflow: hidden;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    background: white;
    margin: 190px auto;
    position: relative;
    cursor: pointer;
    text-align: center;
    font-size: 2.75em;
    font-weight: bold;
    color: #f273ba;
    transition: 0.24s 0.2s;
.navbar .menu{
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -75px;
    left: -75px;
    border: 150px solid transparent;
    cursor: default;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 1.4s 0.07s;
    z-index: -1;
    transition: transform 0.4s 0.08s, z-index 0s 0.5s;
    transform: scale(1);
    z-index: 1;

.navbar .menu li{
    position: absolute;
    top: -100px;
    left: -100px;
    transform-origin: 100px 100px;
    transition: all 0.5s 0.1s;

.navbar:active .menu li{
    transition: all 0.7s;
.navbar .menu li a {
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    background: white;
    position: absolute;
    font-size: 59%;
    color: #f273ba;
    transition: 0.7s;

.navbar:hover .menu li:nth-child(1){
    transition-delay: 0.02s;
    transform: rotate(85deg);
.navbar:hover .menu li:nth-child(1) a{
    transition-delay: 0.04s;
    transform: rotate(635deg);
.navbar:hover .menu li:nth-child(2){
    transition-delay: 0.04s;
    transform: rotate(125deg);
.navbar:hover .menu li:nth-child(2) a{
    transition-delay: 0.08s;
    transform: rotate(595deg);
.navbar:hover .menu li:nth-child(3){
    transition-delay: 0.06s;
    transform: rotate(165deg);
.navbar:hover .menu li:nth-child(3) a{
    transition-delay: 0.12s;
    transform: rotate(555deg);
.navbar:hover .menu li:nth-child(4){
    transition-delay: 0.08s;
    transform: rotate(205deg);
.navbar:hover .menu li:nth-child(4) a{
    transition-delay: 0.16s;
    transform: rotate(515deg);
.navbar:hover .menu li:nth-child(5){
    transition-delay: 0.1s;
    transform: rotate(245deg);
.navbar:hover .menu li:nth-child(5) a{
    transition-delay: 0.2s;
    transform: rotate(475deg);
.navbar:hover .menu li:nth-child(6){
    transition-delay: 0.12s;
    transform: rotate(285deg);
.navbar:hover .menu li:nth-child(6) a{
    transition-delay: 0.24s;
    transform: rotate(435deg);
.navbar:hover .menu li:nth-child(7){
    transition-delay: 0.14s;
    transform: rotate(325deg);
.navbar:hover .menu li:nth-child(7) a{
    transition-delay: 0.28s;
    transform: rotate(395deg);
.navbar:hover .menu li:nth-child(8){
    transition-delay: 0.16s;
    transform: rotate(365deg);
.navbar:hover .menu li:nth-child(8) a{
    transition-delay: 0.32s;
    transform: rotate(355deg);
.navbar:hover .menu li:nth-child(9){
    transition-delay: 0.18s;
    transform: rotate(405deg);
.navbar:hover .menu li:nth-child(9) a{
    transition-delay: 0.36s;
    transform: rotate(315deg);
a,a:active {
    text-decoration: none;
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular menu onclick</title>
    <link rel='stylesheet' href="style.css">
    <link rel="stylesheet" href="">
    <div class="navbar">MENU
        <ul class="menu" onclick="click()">
            <li><a href="" class="fa fa-facebook"></a></li>
            <li><a href="" class="fa fa-twitter"></a></li>
            <li><a href="" class="fa fa-linkedin"></a></li>
            <li><a href="" class="fa fa-google-plus"></a></li>
            <li><a href="" class="fa fa-rss"></a></li>
            <li><a href="" class="fa fa-pinterest"></a></li>
            <li><a href="" class="fa fa-skype"></a></li>
            <li><a href="" class="fa fa-github"></a></li>
            <li><a href="" class="fa fa-instagram"></a></li>

100 thoughts on “How to make hover circular menu to toggle with javascript?”

  1. How to make hover circular menu to toggle with javascript? – JavaScript Help ivermectin for humans [url=]ivermectin without doctor prescription[/url] stromectol canada

  2. Pingback: buy generic viagra
  3. Pingback: viagra otc
  4. Pingback: free cialis
  5. Pingback: sildenafil
  6. Pingback: viagra for ladies