index.html
<span style="--i: 0; --x: -1; --y: 0">
<ion-icon name="videocam-outline"></ion-icon>
</span>
<span style="--i: 1; --x: 1; --y: 0">
<ion-icon name="flame-outline"></ion-icon>
</span>
Those <span> blocks are the individual menu items. The inline CSS variables (--i, --x, --y) encode each item’s index and its position direction — the JS/CSS uses those to stagger and position icons when the menu expands.
script.js
navigation.onclick = function() {
navigation.classList.add('active')
}
close.onclick = function() {
The first handler adds the .active class to .navigation (opens/expands the menu). The second handler (continued below) removes that class (closes it). These two tiny handlers are the interactive core — they toggle the expanded UI state.
style.css
.menu .navigation span {
position: absolute;
width: 7px;
height: 7px;
display: flex;
These base rules define each dot/icon’s starting size and positioning mode. The CSS later uses transform: translate(calc(14px * var(--x)), calc(14px * var(--y))) and transition-delay: calc(0.1s * var(--i)) to move and stagger them — so these lines are the foundation for the whole expand/contract animation.
