Создание интерактивной полукруглой навигации с HTML и Css

Question

Я хочу создать интерактивную вики с html & css, используя полукруг и разделив круг на разные части для каждой топи c. Я имел в виду следующий проект:

https://i.stack.imgur.com/f9Oqp.png

Я не сделал html и css в контексте создания собственных SVG с анимацией , В настоящее время я использую этот пример в качестве отправной точки:

<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;
}

Это мой вопрос об этой задаче:
1) Как создать интерактивные кнопки
- нажатие на кнопку приведет к исчезновению оставшихся кнопок
- Полукруг 1/3 расширится до полукруга 1/4
2) Как я могу улучшить клики с анимацией
- Кнопка увеличивается с 1 / Полукруг от 3 до 1/4

Заранее спасибо!

Answer 1

Чтобы ответить на ваши вопросы:

1). Интерактивную кнопку можно создать разными способами, лично я бы сделал что-то подобное в HTML:

<button type="button" data-toggle="menuItem">Toggle</button>

, а затем в JavaScript (используя jQuery) вы можете проверить, когда эта кнопка нажата:

$("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). Это действительно зависит от того, как вы создаете свои полукруги, но я бы сказал, что вашим лучшим кросс-браузерным решением было бы немного больше изучить свойство CSS 'transition': W3Schools CSS Свойство transition

Надеюсь, это поможет, дайте мне знать, если вы не поняли, что я сказал.