Радиальное меню на CSS и JS

237

13 октября 2017, 15:34

поступила задача сделать как на картинку для пк

необходимо чтобы при наведении изменялся задний фон и появлялся текст относящийся к элементу. всего 9 элементов.

в мобильной версии должно выглядеть как на картинке ниже

в мобильной версии мне понятно. Тут унас аккордеон.

проблема: Я не знаю как реализовать десктоп вариант.

Его необходимо реализовать таким образом, чтобы потом в мобильную версию в аккордеон переделать было легко, не создавая заново для мобильного этот дизайн (если возможно).

Верстаю бутстрапом 3, канвас не знаю, CSS3 средний уровень, js начальный, пользуюсь готовыми скриптами jquery.

Подскажите путь.

п.с. небольшой образец и дайте направление кто знает.

Answer 1

Вот заготовочка:

* { 
  box-sizing: border-box; 
  font: 12px sans-serif; 
  margin: 0; 
  padding: 0; 
} 
:root { 
  --bg: #f00; 
  --angle: 0deg; 
  --radius: 300px; 
  --inner-radius: 160px; 
  --digit-radius: 45px; 
} 
div > b { 
  position: absolute; 
  display: block; 
  width: 0px; 
  height: 0px; 
  border: solid var(--bg) var(--radius); 
  border-radius: var(--radius); 
  clip-path: polygon(50% 0%, 100% 0%, 50% 50%); 
  transform: rotate(var(--angle)); 
  transform-origin: 50% var(--radius); 
  z-index: 1; 
} 
div > b::after { 
  position: relative; 
  display: block; 
  top: -350px; 
  left: -60px; 
  width: calc(var(--digit-radius) * 2); 
  height: calc(var(--digit-radius) * 2); 
  border-radius: calc(var(--digit-radius) * 2); 
  background: #fff; 
  padding: calc(var(--digit-radius) * 0.7) 0 0 calc(var(--digit-radius) * 0.7); 
  content: var(--digit); 
  transform: rotate(calc(360deg - var(--angle))); 
  transform-origin: 50% 50%; 
  font-size: 40px; 
  text-align: center; 
  line-height: calc(var(--digit-radius) * 2); 
  color: var(--bg); 
  z-index: 3; 
} 
div > p { 
  padding: calc(var(--inner-radius) * 0.4); 
  width: calc(var(--inner-radius) * 2); 
  height: calc(var(--inner-radius) * 2); 
  border-radius: calc(var(--inner-radius)); 
  margin: calc(- var(--inner-radius)); 
  background: #fff; 
  position: absolute; 
  left: calc(var(--radius) - var(--inner-radius)); 
  top: calc(var(--radius) - var(--inner-radius)); 
  visibility: hidden; 
  z-index: 2; 
} 
div > b:hover { 
  opacity: .7; 
} 
div > b:hover + p, 
p:hover { 
  visibility: visible; 
}

<div><p style="visibility: visible;">text 0</p></div> 
<div style="--bg: #f00; --angle: 0deg; --digit: '1';"><b></b><p>text 1</p></div> 
<div style="--bg: #0f0; --angle: 45deg; --digit: '2';"><b></b><p>text 2</p></div> 
<div style="--bg: #00f; --angle: 90deg; --digit: '3';"><b></b><p>text 3</p></div> 
<div style="--bg: #ff0; --angle: 135deg; --digit: '4';"><b></b><p>text 4</p></div> 
<div style="--bg: #0ff; --angle: 180deg; --digit: '5';"><b></b><p>text 5</p></div> 
<div style="--bg: #f0f; --angle: 225deg; --digit: '6';"><b></b><p>text 6</p></div> 
<div style="--bg: #4c4; --angle: 270deg; --digit: '7';"><b></b><p>text 7</p></div> 
<div style="--bg: #44c; --angle: 315deg; --digit: '8';"><b></b><p>text 8</p></div>

Просчитать паддинги для каждой цифры, разместить дополнительные картинки, а также пересчитать с 8 на 9 секций — вам домашнее задание. Общий принцип построения должен быть понятен.

Тестировалось в Firefox. Возможно, в других браузерах потребует префиксов.

Answer 2

Вам необходимо использовать селектор в CSS, все делается достаточно просто и аккуратно. Псевдокласс :hover (при наведении курсора применяется необходимый стиль) http://htmlbook.ru/css/hover

Answer 3

css clip-path вот этим можно сделать. всем спс.