CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Circular navigation

1
2
3
4
5
6
<div style="
    position: relative;
">
    <!-- The trigger element that will show all circles when user clicks it -->
    ...

    <!-- A circle menu item -->
    <div style="
        /* Position */
        position: absolute;
        top: 0;
        /*
        80px is the distance from the item to the trigger element.
        Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
        in case you want to have a total of 6 menu items.
        The formulation is 360 / numberOfItems * indexOfItem
        */
        transform: rotate(0deg) translateX(-80px);

        /* Must have the same size as the trigger element */
        height: 32px;
        width: 32px;
    ">
        <!-- The inner -->
        <div style="
            /*
            Rotate it to make it displayed vertically
            Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
            in case you want to have a total of 6 menu items.
            The formulation is -(360 / numberOfItems * indexOfItem)
            */
            transform: rotate(-0deg);

            /* Center the content */
            align-items: center;
            display: flex;
            justify-content: center;

            /* Take full size */
            height: 100%;
            width: 100%;
        ">
            <!-- The content -->
            ...
        </div>
    </div>

    <!-- Repeat menu items -->
    ...
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!