在圆圈内将文本向右换行

Question

我在一些网站上寻找设计灵感，不久前发现了一个菜单，并从中获得了灵感。

当我点击黑色背景下的产品时，菜单项应该从左起显示。我已经使用GSAP实现了动画部分。我希望菜单项包裹在红色圆圈的圆形边缘和可见红色区域的中心。问题是菜单项不是从圆心开始计算的，而是沿着圆的边缘等距离放置的。有没有一种动态的方法来计算它，或者我应该通过静态的边距和填充来放置它们。正如你所看到的，如果菜单项有两个或两个以上的单词，它应该换行并将自己与中心对齐。我用了一段时间来完成布局。

有人能为我指明正确的方向并帮助我到达目的地吗。干杯

以下是鼓舞人心的图片：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>

这是代码笔链接

Answer 1

你正在做一些好的、新的、很棒的工作！：(

这是我在你的代码中尝试过的东西，我试图通过js实现这个要求。请查看此处提供的代码笔链接。希望它能帮助你。当你点击时，动画中仍然有一些跳跃的感觉，但你可以稍后使用它来解决这个问题。我只是想告诉你背后的逻辑。

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 });
var xpositionforfirst = 80;
$(".sub-menu ul.first li").each(function(i) {
var item = $(this);
console.log(item);
TweenMax.staggerTo(item, 0.5, { x: xpositionforfirst, opacity: 1, ease: Power1.easeOut, delay: 0.6 }, 0.1);
xpositionforfirst = xpositionforfirst + 30;
});
var xpositionforsecond = 140;
$(".sub-menu ul.second li").each(function(i) {
var item = $(this);
console.log(item);
TweenMax.staggerTo(item, 0.5, { x: xpositionforsecond, opacity: 1, ease: Power1.easeOut, delay: 0.6 }, 0.1);
xpositionforsecond = xpositionforsecond - 30;
});   
});
$('.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 });
});
});

https://codepen.io/pgurav/pen/yLLxqvz