Round navigation dock/menu built with CSS or jQuery

Question

Round navigation dock/menu built with CSS or jQuery

Is there a way to create a circular menu or dock using CSS or jQuery that is responsive to varying numbers of items? My goal is to display a set of images as dock items in a circular layout, but the number of items can change due to AJAX loading. I need a solution that will automatically adjust the positioning of each item to maintain the circular design. Any suggestions on how to achieve this with CSS or jQuery?
I prefer a cross-browser implementation, but I am open to browser-specific solutions if necessary.

UPDATE
Instead of a pie menu, I am actually looking to implement a spiral dock for better scalability with increasing dock items. In a spiral dock, the menu items should be aligned to follow a spiral pattern rather than a radial one.

jquery html css

Answer 1

Answer №1

Understanding the concept! Feel free to make adjustments.

Discover more about spirals by polar equations here

Check out this JSFiddle demo and refer to the code snippet below:

var items = 10;
var a = 20;
var b = 1; // added extra variable b for rate adjustment
var centerX = $('.content').innerWidth()/2; 
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

For testing, apply the following CSS styles:

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

Update: response to comment

The yPos and xPos functions create items outward from the center. Adjusting the a and introducing an additional b in the Math.cos(b*i) allows for control over the spiral's density and spread. The amplitude is determined by a, while the rate of appearance is influenced by the new b.

A smaller b results in tighter spacing along the spiral. A smaller a reduces the spread in x and y axes.

If the number of images varies, the spiral outward design should accommodate well unless overcrowded.

An alternative is implementing this in PHP if dynamic functionality isn't needed, enabling backend execution with similar logic using loops and output statements.

Answer 2

Understanding the concept! Feel free to make adjustments.

Discover more about spirals by polar equations here

Check out this JSFiddle demo and refer to the code snippet below:

var items = 10;
var a = 20;
var b = 1; // added extra variable b for rate adjustment
var centerX = $('.content').innerWidth()/2; 
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

For testing, apply the following CSS styles:

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

Update: response to comment

The yPos and xPos functions create items outward from the center. Adjusting the a and introducing an additional b in the Math.cos(b*i) allows for control over the spiral's density and spread. The amplitude is determined by a, while the rate of appearance is influenced by the new b.

A smaller b results in tighter spacing along the spiral. A smaller a reduces the spread in x and y axes.

If the number of images varies, the spiral outward design should accommodate well unless overcrowded.

An alternative is implementing this in PHP if dynamic functionality isn't needed, enabling backend execution with similar logic using loops and output statements.

Answer 3

Answer №2

If you're not interested in a pie menu, maybe this code I have can be helpful to you (or one of the initial sources). The item positions are automatically calculated, so there's no need to stress about adding or removing them.

Answer 4

If you're not interested in a pie menu, maybe this code I have can be helpful to you (or one of the initial sources). The item positions are automatically calculated, so there's no need to stress about adding or removing them.

Answer 5

Answer №3

Is this something that might catch your eye?

Answer 6

Is this something that might catch your eye?

Answer 7

Answer №4

I suggest utilizing a resource such as http://example.com/unique-plugin

experiment with replacing the plugin's animate function with a straightforward
.css({'margin-left':x,'margin-top':y})

the necessary math operations are already provided, you just need to modify the animation into a fixed position (adjusting the offset for each menu item)

Apologies for not providing code, it is simpler to execute than to elucidate :D

Answer 8

I suggest utilizing a resource such as http://example.com/unique-plugin

experiment with replacing the plugin's animate function with a straightforward
.css({'margin-left':x,'margin-top':y})

the necessary math operations are already provided, you just need to modify the animation into a fixed position (adjusting the offset for each menu item)

Apologies for not providing code, it is simpler to execute than to elucidate :D

Round navigation dock/menu built with CSS or jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The folder could not be located by MAMP

How to add vertical bars within ng-repeat in AngularJS

Issue with CRUD functionality: The edit function is not functioning properly, as it does not reflect any changes on the

Is a persistent left border / divider only on the even-numbered items in the list?

How to retrieve the chosen value from a dropdown list using jQuery and PHP

What are the distinctions between the OL > LI:only-child and !OL > LI:only-child CSS Selector 4?

Pure CSS text slideshow

Locate the position of the cursor within a rectangular shape

Tips on implementing a Javascript function triggered by a user's click within the video player frame

Is there a way to verify if the JSON Object array includes the specified value in an array?

Disable the borders on HTML input fields

Issue with @media print and hiding elements

JQuery Ajax encounters a 500 error message due to an internal server issue

Is there a particular Jquery extension that can achieve this special effect, and how is this effect commonly referred

Error encountered: The jQuery DevExtreme datagrid function $(...).dxDataGrid is throwing an Uncaught TypeError

Challenges in customizing the bootstrap navigation bar links

Ways to reposition Material UI tabs at the base of a container such as AppBar?

My Ajax request is hitting a snag - the success function isn't functioning as expected

Using Select2 JS to populate dropdown options with an AJAX response

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom