Меню углового круга CSS и jQuery

Я пытаюсь создать меню углового круга, как показано на рисунке ниже:

Пример меню окружного угла

Вот что я пробовал и добился:

$(".menu").click(function(){
    $(".menu-items").fadeToggle();
});
html,body{
        color:#000;
}

.menu{
        position:fixed;
        left:-100px;
        top:-100px;
        z-index:9999 !important;
        width:200px;
        height:200px;
        border-radius:50%;
        background-color:#3F51B5;
}

.menu .menu-btn{
        position:absolute;
        bottom:50px;
        right:50px;
}

.menu-items{
        position:fixed;
        top:-100;
        left:-100;
        z-index:9990 !important;
        width:250px;
        height:250px;
        background:#2979FF;
        border-radius:50%;
}
<html>
<head>
        <title>Corner Circle Menu</title>
</head>
<body>
        <div class="menu">
                <div class="menu-btn">Menu</div>
        </div>
        <div class="menu-items">
                <div class="menu-item">Item 1</div>
                <div class="menu-item">Item 2</div>
                <div class="menu-item">Item 3</div>
        </div>
</body>
</html>

Я пытался добиться этого с 2 дней, но не смог найти никаких соответствующих кодов или идей или логики. Пожалуйста, может ли кто-нибудь объяснить / направить мне математику и css за этим дизайном?

javascript,jquery,html,css,menu,

3
Яндекс.Метрика