将文本向右环绕，在一个圆圈内

Question

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 the visible red area. The problem is the menu items are not being calculated from the center of the circle but are being positioned equally along the edges of the circle. Is there a dynamic way to calculate it or should I place them by static margins and paddings. 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

Answer 1

You are doing something good and new, great job: :)

Here is something I tried with your code, I tried to achieve this requirement by js. Please have look into the codepen link provided here. Hope will it will help you. while you click there is still some jump feels in animation, but you can play with it later to resolve that. I just want to show you the logic behind it.

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

Answer 2

I have a solution by using margin-right on each li element, pushing to the right. I put some random values for testing.

Hope it helps:)

 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 style="margin-right:1%"><a href="#">menu1 very big</a></li> <li style="margin-right:-20%"><a href="#">menu2</a></li> <li style="margin-right:-30%" ><a href="#">menu3</a></li> </ul> <ul> <li style="margin-right:-25%"><a href="#">menu4 big</a></li> <li style="margin-right:-15%"><a href="#">menu5</a></li> <li style="margin-right:10%"><a href="#">menu6</a></li> </ul> </div> </div>