JSFiddle - React, Tailwind, and code Playground

by ZachWills

HTML

<nav class="menu">
    <a href="#" id="item1"></a>
    <a href="#" id="item2"></a>
    <a href="#" id="item3"></a>
    <div class="plus">+</div>
</nav>

CSS

.menu {
	width: 50px;
	height: 50px;
	margin: auto;
	margin-top: 100px;
	position: relative;
}

.menu a {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	width: 20px;
	height: 20px;
	background: blue;
	border: 1px solid black;
	border-radius: 100%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -10px;
	margin-top: -10px;
}

.plus {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	line-height: 35px;
	font-size: 32px;
	color: white;
	text-align: center;
	background: #333;
	cursor: pointer;
}

.clicked .plus {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.clicked #item1 {
	top: -12px;
	left: -5px;
}

.clicked #item2 {
	top: -20px;
	left: 50%;
	margin-left: -10px;
}

.clicked #item3 {
	top: -12px;
	left: 55px;
}

JavaScript

$(".plus").click(function () {
    $(this).parent(".menu").toggleClass("clicked");
});