Menu
I am trying to create a corner circle menu as shown in the image below:
This is what I have tried and achieved:
$(".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 trying to achieve this from 2 days but was unable to find any relevant codes or ideas or logic. Please could anyone explain/guide me the mathematics and css behind this design?
647
asked Jun 27 '26 23:06
The key to creating the menu items is to put them in a circular div and set the circular div to overflow hidden, rotate each one of them and skew them. Check out this tutorial: http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
85
answered Jun 30 '26 13:06
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With