My goal is to implement a corner circle menu, similar to the one shown in the image below:
https://i.stack.imgur.com/zma5U.png
This is what I have accomplished so far:
$(".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>I have been struggling with this for the past couple of days and haven't been able to find any relevant code or ideas. Can someone please explain or guide me through the mathematics and CSS behind this design?