Creating an interactive semicircle navigation with HTML and Css - html

Question

i want to create an interactive wiki with html & css by using a semicircle and dividing the circle into different pieces for each topic. I had the following draft in mind:
https://i.stack.imgur.com/f9Oqp.png
I haven't done html and css in the context of creating own SVGs with animations.
Currently i am using this example as a starting point:
<ul class="menu">
<li class="one">
<a href="#">
<span class="icon">Category 1</span>
</a>
</li>
<li class="two">
<a href="#">
<span class="icon">Category 2</span>
</a>
</li>
<li class="three">
<a href="#">
<span class="icon"> Category 3</span>
</a>
</li>
<svg height="0" width="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="sector">
<path fill="none" stroke="#111" stroke-width="1" class="sector" d="M0.5,0.5 l0.5,0 A0.5,0.5 0 0,0 0.75,.066987298 z"></path>
</clipPath>
</defs>
</svg>
$base: #A5E2F3;
.menu {
padding: 0;
list-style: none;
position: relative;
margin: 30px auto;
width: 70%;
height: 0;
padding-top: 70%;
}
#media all and (max-width: 320px) {
.menu {
width: 230px;
height: 230px;
padding: 0;
}
}
#media all and (min-width: 700px) {
.menu {
width: 500px;
height: 500px;
padding: 0;
}
}
.menu li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: url(#sector);
/* try this one in Chrome/Opera/Safari */
/* clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%); */
a {
display: block;
width: 100%;
height: 100%;
}
&:hover {
background-color: gold;
}
}
.one {
background-color: $base;
transform: rotate(0deg);
}
.two {
background-color: darken($base, 7%);
transform: rotate(-60deg);
}
.three {
background-color: darken($base, 14%);
transform: rotate(-120deg);
}
.icon {
position: absolute;
/* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
right: 15%;
top: 30%;
/* make sure it it rotated enough; angle of rotation = angle of the sector itself */
transform: rotate(60deg);
/* style further as needed */
color: darken($base, 60%);
font-family: Indie Flower;
font-size: 25px;
}
p {
text-align: center;
width: 80%;
margin: 0 auto;
}
These are my question about this task:
1) How can i create interactive buttons
- click on the button will make the remaining buttons disappear
- 1/3 semicircle will expand to a 1/4 semicicircle
2) How can i improve the clicks with animations
- Button Grows from 1/3 to 1/4 semicircle
Thank you in advance!

Answer 1

To answer your questions:
1). An interactive button can be created in many ways, personally I would do something like this in HTML:
<button type="button" data-toggle="menuItem">Toggle</button>
and then in JavaScript (using jQuery) you can check for when this button is clicked:
$("button[data-toggle='menuItem']").on("click", function () {
// - Do your toggle logic in here
// - Do '.hide()' on all buttons that aren't '$(this)'.
// - Add class to '$(this)' to make it expand.
});
2). It really depends on how you're creating your semi-circles but I would say your best cross-browser solution would be to look into the CSS 'transition' property a bit more: W3Schools CSS transition Property
I hope this helps, let me know if you don't understand something I've said.