JSFiddle - React, Tailwind, and code Playground

by gahathat

HTML

<nav>
            <ul>
                <li><a href="#">Menu1</a></li>
                <li><a href="#">Menu2</a></li>
                <li><a href="#">Menu3</a></li>
                <li><a href="#">Menu4</a></li>
                <li><a href="#">Menu5</a></li>
                <li><a href="#">Menu6</a></li>
            </ul>
        </nav>

CSS

nav {
	position: relative;
	top: 100px;
	left: 200px;
}
li {
	color: black;
	list-style: none;
	
}
a {
	position: absolute;
	text-decoration: none;
	border: 1px solid black;
	width:98px;
	height:98px;
	border-radius:50px;
	line-height:100px;
	text-align:center;

}
a:hover {
    color: red;
}
}

JavaScript

$(function() {
	circle_radius = 100;
	$links = $('nav ul li a');
	total_links = $links.size();
	$links.each(function(index) {
		$(this).attr('data-index',index);
		animateCircle($(this), 1);
	});
	$('li a').hover(function() {
		animateCircle($(this), 1.5)
	}, function() {
		animateCircle($(this), 1)

	});
	
	function animateCircle($link, expansion_scale) {
		index = $link.attr('data-index');
		radians = 2*Math.PI*(index/total_links);
		x = -(Math.sin(radians)*circle_radius*expansion_scale);
		y = -(Math.cos(radians)*circle_radius*expansion_scale);
		$link.animate({
			top: x+'px',
			left: y+'px'
		}, 200);
	}
});