Всем привет. Пытаюсь создать круговое меню и застрял. Посидев весь день в поисках ответов собрал-таки "пирог", но теперь не могу понять как мне его разделить. Итоговая конструкция имеет такой вид:
.
Что имеется сейчас:
.
При этом мне не до конца понятно как организовать разметку.
Такой вариант сейчас и при этом куски пирога, которые по идеи выступают ссылками не кликабельны т.к. они во-первых меньше этих кусков т.к. вложены в список, а во-вторых я их пока что убрал из стилей.
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <main>
<div class="container">
<button class="btn" id="circle-btn" hidden=""></button>
<div class="wrapper" id="circle-wrapper">
<ul class="list">
<li class="litem l-1"><a href="#"><span class="part-1"></span></a></li>
<li class="litem l-2"><a href="#"><span class="part-2"></span></a></li>
<li class="litem l-3"><a href="#"><span class="part-3"></span></a></li>
<li class="litem l-4"><a href="#"><span class="part-4"></span></a></li>
<li class="litem l-5"><a href="#"><span class="part-5"></span></a></li>
<li class="litem l-6"><a href="#"><span class="part-6"></span></a></li>
<li class="litem l-7"><a href="#"><span class="part-7"></span></a></li>
<li class="litem l-8"><a href="#"><span class="part-8"></span></a></li>
</ul>
</div>
<div class="overlay" id="circle-overlay"></div>
</div>
</main> |
|
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| .wrapper {
margin: auto;
position: relative;
width: 380px;
height: 380px;
margin-top: 300px;
background-color: rgba(0,0,0,.5);
border-radius: 50%;
overflow: hidden;
}
.litem {
display: block;
position: absolute;
border: 1px dashed green;
left: -30px;
top: -30px;
width: 220px;
height: 220px;
transform-origin: 100% 100%;
}
.l-1 {
transform: rotate(0deg) skew(45deg);
}
.l-2 {
transform: rotate(45deg) skew(45deg);
}
.l-3 {
transform: rotate(90deg) skew(45deg);
}
.l-4 {
transform: rotate(135deg) skew(45deg);
}
.l-5 {
transform: rotate(180deg) skew(45deg);
}
.l-6 {
transform: rotate(225deg) skew(45deg);
}
.l-7 {
transform: rotate(270deg) skew(45deg);
}
.l-8 {
transform: rotate(315deg) skew(45deg);
} |
|
А вот теперь куски пирога будут целиком состоять прямо из ссылок и кликабельны по всему периметру каждого кусочка:
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
| <div class="wrapper" id="circle-wrapper">
<div class="list">
<a class="ss s1" href="#"><span class="part-1"></span></a>
<a class="ss s2" href="#"><span class="part-2"></span></a>
<a class="ss s3" href="#"><span class="part-3"></span></a>
<a class="ss s4" href="#"><span class="part-4"></span></a>
<a class="ss s5" href="#"><span class="part-5"></span></a>
<a class="ss s6" href="#"><span class="part-6"></span></a>
<a class="ss s7" href="#"><span class="part-7"></span></a>
<a class="ss s8" href="#"><span class="part-8"></span></a>
</div>
</div> |
|
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| .ss {
display: block;
position: absolute;
border: 1px dashed green;
left: -30px;
top: -30px;
width: 220px;
height: 220px;
transform-origin: 100% 100%;
}
.s1{
transform: rotate(0deg) skew(45deg);
}
.s2 {
transform: rotate(45deg) skew(45deg);
}
.s3 {
transform: rotate(90deg) skew(45deg);
}
.s4 {
transform: rotate(135deg) skew(45deg);
}
.s5 {
transform: rotate(180deg) skew(45deg);
}
.s6 {
transform: rotate(225deg) skew(45deg);
}
.s7 {
transform: rotate(270deg) skew(45deg);
}
.s8 {
transform: rotate(315deg) skew(45deg);
} |
|
Какой вариант лучше? Первый вариант разметки я подсмотрел в статье одного чувака, который объяснял как делать круговое меню. Так что я не до конца понимаю зачем делать лишнюю обертку в виде элементов списка, когда можно сразу сделать ссылки.
Собственно вопросов на данный момент пока что 3:
1. какая разметка лучше из двух вариантов
2. как "разделить пирог"
3. как поместить в центр круг, который обрежет края внешнего круга и получится первый уровень кругового меню.
Т.е. в центре круг, на него наводишь мышку и по его краям появляется 8 "прямоугольничков", которые на данный момент в форме пирога.
Подскажите как подступиться, что надо сделать.
P.S.
Есть один пример, похожий на то что я пытаюсь сделать:
https://codepen.io/web-tiki/pen/ZYmZoV
Однако сколько бы я ни копался в коде не могу подогнать под свой вариант. Не понимаю как организовать 8 кусков, вместо 4.
(
