sibling-indexとsibling-countで作るリングメニュー
sibling-indexとsibling-countを使うと、CSSで兄弟要素の全数とその中での位置を取得できる。
.item {
width: calc(sibling-count() * 100px);
margin-inline-start: calc(sibling-index() * 10px);
}
要素の全数と位置を取得できるので、たとえば角度の計算が必要なリングメニューのようなUIを簡単に実装できる。
<div class="ring-menu" role="menu">
<div class="item" role="menuitem">1</div>
<div class="item" role="menuitem">2</div>
<div class="item" role="menuitem">3</div>
<div class="item" role="menuitem">4</div>
<div class="item" role="menuitem">5</div>
...
</div>
.ring-menu {
position: relative;
width: 300px;
height: 300px;
.item {
position: absolute;
background-color: #333;
color: #eee;
inline-size: 50px;
block-size: 50px;
border-radius: 50%;
text-align: center;
align-content: center;
--angle: calc(360deg / sibling-count() * (sibling-index() - 1));
--x: var(calc(50% + sin(var(--angle)) * 100px));
--y: var(calc(50% + cos(var(--angle)) * 100px));
top: var(--y);
left: var(--x);
}
}