Here are the requirements:
- Hover effect when any of the ‘Navigation’ sections (Navigation 1, Navigation 2, Navigation 3) is selected.
- Click effect when any of the ‘Navigation’ sections (Navigation 1, Navigation 2, Navigation 3) is selected. If Navigation 1 is clicked, it will go to another page, same as Navigation 2 and Navigation 3.
I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.
.text
{
cursor:pointer;
}
.circle {
position: relative;
border: 0px;
padding: 0;
margin: 1em auto;
width: 430px;
height: 430px;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
li {
overflow: hidden;
position: absolute;
top: -20%;
right: -20%;
width: 70%;
height: 70%;
transform-origin: 0% 100%;
}
.text {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
text-align: center;
transform: skewY(-60deg) rotate(15deg);
padding-top: 20px;
}
li:first-child {
transform: rotate(0deg) skewY(30deg);
border-left: 8px solid #fff;
border-right: 8px solid #fff;
}
li:nth-child(2) {
transform: rotate(120deg) skewY(30deg);
border-right: 8px solid #fff;
border-left: 8px solid #fff;
}
li:nth-child(3) {
transform: rotate(240deg) skewY(30deg);
border-right: 8px solid #fff;
border-left: 8px solid #fff;
}
li:first-child .text {
background: green;
}
li:nth-child(2) .text {
background: tomato;
}
li:nth-child(3) .text {
background: aqua;
}
li:nth-child(3) .text:hover {
background-color: #a5e2f3;
}
li:nth-child(2) .text:hover {
background-color: #86d8ef;
}
li:nth-child(1) .text:hover {
background-color: #66ceeb;
}
.cn-button {
position: absolute;
top: 40%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -2.25em;
padding-top: 0;
width: 4.5em;
height: 4.5em;
border: 1px solid;
border-radius: 50%;
background: none;
background-color: yellow;
color: yellow;
text-align: center;
font-weight: 700;
font-size: 1.5em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.icon {
position: absolute;
/* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
top: 40%;
/* make sure it it rotated enough; angle of rotation = angle of the sector itself */
transform: rotate(224deg);
/* style further as needed */
color: #fff;
font-family: Indie Flower;
font-size: 25px;
}<button class="cn-button" id="cn-button"></button>
<ul class="circle">
<li>
<a class="one" href="circle.html">
<div class="text" ><span class="icon">Navigation 1</span></div>
</a>
</li>
<li>
<a class="two" href="circle2.html">
<div class="text"><span class="icon">Navigation 2</span></div>
</a>
</li>
<li>
<a class="three" href="circle3.html">
<div class="text"><span class="icon">Navigation 3</span></div>
</a>
</li>
</ul>i want exact like 
.
How can I create a menu like this where I can dynamically add items?
