Enclose words within a circular shape aligned to the right

As I scoured various design sites for inspiration, I stumbled upon a menu some time ago that captured my interest.

The functionality I am aiming for is as follows: when clicking on the products against a black background, the menu items should elegantly display from the left. Thanks to GSAP, I was able to achieve the desired animation effect. However, I now want the menu items to wrap around the rounded edges of the red circle and align themselves in the center of the visible red area. The challenge lies in ensuring that the menu items are calculated from the center of the circle rather than being positioned uniformly along its edges. Should I opt for static margins and paddings or is there a dynamic way to calculate this? Additionally, in cases where a menu item consists of two or more words, it should properly wrap and align itself at the center. Currently, I have resorted to using line breaks to structure the layout accordingly.

If anyone could provide guidance or direction to help me seamlessly navigate towards achieving these objectives, it would be greatly appreciated. Thank you!

Inspiration Image: Link

Products

Products

  • menu1 very big
  • menu2
  • menu3
  • menu4 big
  • menu5
  • menu6
javascriptjqueryhtmlcss

Answer №1

Keep up the fantastic work! :)

I took a shot at enhancing your code with some JavaScript to meet a specific requirement. Take a look at the CodePen link provided below. Although there may be a slight jump in the animation when you click, you can modify it later to smooth things out. My main focus was to demonstrate the underlying logic to you.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I encountered an issue with the timeouts() and windows() methods where I received an error message stating "The method window() is undefined for the type WebDriver.Options"

Currently, I am utilizing the driver.manage().timeouts().implicitlyWait(120, TimeUnit.SECONDS); and driver.manage().window().maximize(); methods in my code. However, encountering an error with the timeouts() and window() functions. The error message states ...

javascriptselenium-webdriver

Implementing TestCafe with a Rails backend and utilizing fixtures data for testing

Currently, I am involved in a Rails project that utilizes RSpec for testing. We rely on various Rails fixture data to test our UI under different conditions. Recently, I came across TestCafe for handling functional UI testing, and I find it quite intrigui ...

javascriptruby-on-railstestingrspectestcafe

What causes the focus to be lost when hovering over the second item in the sub list

Link to Fiddle: https://jsfiddle.net/n3tzbn4o/3/ Snippet of CSS: /* Styling for Menu element */ .menu { position: relative; z-index: 100; height: 40px; width: 100%; } Whenever the cursor hovers over Menu 3 > '2015' > Assesmen ...

htmlcss

Utilizing Three.js for onWindowResize event parameterization

As I delve into the world of JavaScript coding and experiment with Three.js, I've come across a function that dynamically scales my scene based on the size of the browser window: function onWindowResize() { camera.aspect = window.innerWidth / wi ...

javascriptthree.js

Having difficulty accessing object property using Chunk Template Engine

I am working on a project where I have created a list of objects and now need to retrieve the object name from a template using the Chunk Template Engine. The object list has been initialized as follows: html.set("items", new Item[]{new Item("Item 1", 2) ...

javaandroidhtmlstringchunk-templates

Is there a way to retrieve multiple results by utilizing fetch and randomuser.me?

I am currently working with the randomuser.me API and have set up the fetch request correctly. My goal is to retrieve 5 users separated by commas instead of just one. As mentioned in randomuser.me's documentation, I simply need to append the fetch UR ...

javascriptfetch-api

Manipulate a JavaScript array for optimal utilization in Google Charts by flattening the days nested within the array

Here is an array [ ["04/21/2021", 405, 85, 30] ["04/18/2021", 350, 135, 30] ["04/16/2021", 335, 120, 30] ["04/15/2021", 420, 100, 30] ["04/15/2021", 405, 85, 30] ["04/15/2021", 350, 13 ...

javascriptreactjsfor-loopcharts

Encountering a lack of response when making an ajax call to CouchDB

Being relatively new to CouchDB, I appreciate your patience. Currently, I have set up an instance of CouchDB on a VM. It can be accessed without any issues through the browser via futon or directly at: http://192.168.62.128:5984/articles/hot_dog Althoug ...

jqueryajaxjsoncouchdb

There was a problem compiling bootstrap.scss due to an error found in _root.scss

I've encountered an issue while compiling my bootstrap sass file. The error message I'm receiving is shown below. Although I can make it work by commenting out lines 4 and 8 of _root.scss, that is not the optimal solution. Can someone please expl ...

csssassbootstrap-4

Utilizing the Bootstrap Carousel tied to a specific slide index

Here is a simple HTML page I have created. <html> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quo ...

javascriptbootstrap-4carousel

Error encountered when transferring variable from jQuery to PHP due to index being undefined

Referenced from this query: Passing Jquery variable to php within a modal The setup is in place and should be functioning, but an undefined index error is occurring. Within a loop: print '<li>'; print '<a class="btn btn-d ...

phpjqueryhtmlajaxtwitter-bootstrap

Updating input values dynamically using AJAX in Laravel 6

Having an issue with filling Input after selection in a Dropdown. The database contains contact details. On the form, there is a Dropdown displaying names of people that should populate the fields with data on click. Using Ajax with Jquery for this purpose ...

jquerymysqlajaxlaravel

Encapsulating data with JSON.stringify

I'm currently working on creating an object that has the following structure: let outputOut = { "_id": id[i], "regNum": code[i], "sd": sd[i], "pd": ptOut, "p": p[i], ...} //output fs.writeFile('./output/file.json', JSON ...

javascriptjsonstringify

Code execution halted before AJAX/XMLHttpRequest Call was made

Below is the Javascript code I am currently using: document.getElementById("button").disabled = true; document.getElementById("button").innerHTML = "Please Wait..."; var xhttp = new XMLHttpRequest(); xhttp.open("GET", "MoodInput"+ "?moodValue=" + input, ...

javascripthtmlajaxxmlhttprequest

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Is there a way to display both numerical step values and corresponding custom text in Angular Material? I prefer having the number at the top and the descriptive text at the bottom. Check out this image for reference: https://i.stack.imgur.com/LGMIO.png ...

javascripthtmlcssangularangular-material

Dynamic React Hooks Input

I have a form component that allows users to add an input when clicking a button, creating new teams in which players can be added. The issue is that when filling in a value, all inputs get filled with the same value because they are using the same state. ...

javascriptreactjstypescript

What kinds of items can be sent out through socket.io?

What types of objects can be sent to the client using the socket.emit method in the server side with the socket.io library? For instance, an example from the socket.io website shows: socket.emit('news', { hello: 'world' }); But there ...

javascriptnode.jssocket.io

"Experience the power of MVC single page CRUD operations paired with dynamic grid functionality

Currently attempting to create a single page application CRUD functionality using UI Grid, however encountering an error during post request. ...

javascriptangularjsuser-interfacegrid

Empty refreshToken in aws-amplify's javascript

Utilizing aws-amplify, my configuration looks like this: Amplify.configure({ Auth: { region: config.aws.region, identityPoolRegion: config.aws.region, userPoolId: process.env.userPoolId, userPoolWebClientId: process.env.appClientI ...

javascriptreactjssingle-sign-onaws-amplifyaws-config

Passing JSON data with special characters like the @ symbol to props in React can be achieved

Using axios in React, I am fetching JSON data from a database. I have successfully retrieved the JSON data and stored it in state to pass as props to child components within my application. However, the issue arises when some of the objects in the JSON s ...

javascriptreactjsaxios