I was going through some sites for design inspirations and found a menu quite a while ago and took inspiration from it.
It goes as follows when I click on the products in black background, the menu items should display from left. I have achieved the animation part using GSAP. I want the menu items to wrap on to the rounded edges of the red circle and center of visible red area. And as you can see if the menu item has two or more words it should wrap and align itself to the center of itself. I have used a break just to achieve the layout.
Can someone point me in the right direction and help me reach my destination in this. Cheers.
Here is the inspirational image: https://i.ibb.co/QJFmsXJ/Untitled.png
jQuery(document).ready(function($) {
var $mainmenu = $('.menu');
var $menuItemsWrap = $(".sub-menu");
var $MenuItems = $(".sub-menu li");
$('.menu').click(function() {
$('.menu-dummy').css({"display": "block","z-index": "5"
});
$('.menu').css({"display": "none"
});
TweenMax.to($menuItemsWrap, 0.6, {
width: 400,
height: 400,
ease: Power1.easeIn
});
TweenMax.staggerTo($MenuItems, 0.5, {
x: 80,
opacity: 1,
ease: Power1.easeOut,
delay: 0.6
}, 0.1);
});
$('.menu-dummy').click(function() {
$('.menu-dummy').css({"display": "none",
});
$('.menu').css({"display": "block"
});
TweenMax.staggerTo($MenuItems, 0.5, {
x: -80,
autoAlpha: 1,
ease: Power1.easeOut
}, 0.05);
TweenMax.to($menuItemsWrap, 0.6, {
width: 0,
height: 0,
ease: Power1.easeIn,
delay: 1
});
});
});body {
margin: 0;
padding: 0;
}
.bubble-menu {
position: relative;
width: 600px;
height: 600px;
background: grey;
}
.menu.menu-style1 {
z-index: 4;
}
.menu.menu-style1,
.menu-dummy.menu-style1 {
color: #fff;
position: relative;
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.menu-wrap {
background-color: black;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
position: relative;
z-index: 3;
cursor: pointer;
}
.menu-wrap h3 {
font-size: 20px;
font-family: sans-serif;
user-select: none;
transform: rotate(-90deg) translateY(25px);
}
.menu-wrap i {
font-size: 25px;
line-height: 25px;
}
a {
color: black;
}
.sub-menu {
position: absolute;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 0;
width: 0;
height: 0;
background: red;
display: flex;
flex-direction: column;
transform: translate(-50%, -50%);
z-index: 3;
}
.sub-menu ul {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
text-align: center;
list-style: none;
padding: 0;
border-radius: 50%;
}
.sub-menu li {
transform: translate(-80px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://use.fontawesome.com/a2e210f715.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script><div class="bubble-menu"><div class="menu menu-style1"><div class="menu-wrap"><h3>Products</h3><i class="fa fa-angle-right" aria-hidden="true"></i></div></div><div class="menu-dummy menu-style1"><div class="menu-wrap"><h3>Products</h3><i class="fa fa-angle-right" aria-hidden="true"></i></div></div><div class="sub-menu"><ul><li><a href="#">menu1 very big</a></li><li><a href="#">menu2</a></li><li><a href="#">menu3</a></li></ul><ul><li><a href="#">menu4 big</a></li><li><a href="#">menu5</a></li><li><a href="#">menu6</a></li></ul></div></div>Here is the codepen Link