Подскажите пожалуйста каким образом можно сделать такой семи круг с пунктами?
2 ответа
Вот Вам svg+css
и верстка по формуле, для автоматического определения положения маленьких кругов на большом.
// cx, cy - центр большого круга
// r - радиус большого круга
// alpha - угол в полярной системе координат
let x = cx + cos(alpha - PI/2) * r;
let y = cy + sin(alpha - PI/2) * r;
Можно отладчиком отсюда вытащить готовую svg
и на странице не использовать никакие скрипты.
let r1 = 500, // радиус большого круга
r2 = 12, // радиус маленьких кругов
step = 0.08, // шаг между кругами в радианах
cx = 150, // координаты центра
cy = r1 + 40; // большого круга
let icons = ['🍣','🍟','🍩','🍔','🍕','🍦','🍜'];
// функция, добавляющая круг, аргументы - x центра, y центра, радиус, классы стилей
let circle = (x,y,r,c) => `<circle r="${r}" cx="${x}" cy="${y}" class="${c}"></circle>`;
// функция, добавляющая текст, аргументы - x центра, y центра, текст
let text = (x,y,t) => `<text x="${x}" y="${y}">${t}</text>`;
let g = document.querySelector('svg g');
// большой круг
g.innerHTML += circle(cx, cy, r1, 'bg');
icons.forEach((e,i) => {
// тут я наверное слишком намудрил, сдвиг считается таким образом, чтобы расположить
// первый элемент по центру, а последующие поочередно справа и слева...
let shift = Math.floor(++i/2)* Math.sign(i%2-0.5)*step;
// считаем центры малых кругов
let x = cx + Math.cos(shift - Math.PI/2)*r1;
let y = cy + Math.sin(shift - Math.PI/2)*r1;
// малый круг
g.innerHTML += circle(x, y, r2, 'small');
// emoji icon вставляется обычным текстом
g.innerHTML += text(x, y+2, e);
});
// а это небольшой бонус дающий эффект интерактивности
addEventListener('mousemove', e => {
// вращаем всю группу элементов вокруг центра большого круга
g.setAttribute('transform', `rotate(${0.5-e.x/innerWidth}, ${cx} ${cy})`)
})
body {
overflow: hidden;
margin: 0;
}
circle {
transition: 0.2s;
cursor: pointer;
}
circle:hover {
stroke-width: 15;
stroke: rgba(0,0,0,0.1);
}
circle:hover + text{
font-size: 16px
}
text {
transition: 0.2s;
font-size: 14px;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
.bg {
fill: none;
stroke: white;
pointer-events: none
}
.small {
fill: white;
stroke: transparent;
}
<svg viewbox="0 0 300 100" style="background-color:lightblue"
preserveAspectRatio="xMidYMid meet">
<g></g>
</svg>
PS: по мне такой вариант удобен тем, что внести в него изменения пару пустяков, поменял коэффициенты и все...
Такой себе вариант, но как вариант))
.menu {
display: block;
width: 100%;
padding-top: 35px;
font-size: 0;
text-align: center;
overflow: hidden;
position: relative;
}
.menu::after {
content: '';
width: 100%;
height: 200%;
border-radius: 100%;
border: 1px solid red;
position: absolute;
left: 0; right: 0;
bottom: -125%;
}
.item {
display: inline-block;
width: 30px;
height: 30px;
background: green;
border-radius: 100%;
position: relative;
z-index: 1;
cursor: pointer;
}
.item:hover {
background: blue;
}
.item:not(:last-child) {
margin-right: calc(100% / 7 - 30px);
}
.item:nth-child(2),
.item:nth-child(6) {
top: -20px;
}
.item:nth-child(3),
.item:nth-child(5) {
top: -30px;
}
.item:nth-child(4) {
top: -35px;
}
<div class="menu">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>