Trying a Secret of Mana-esque menu


by Jeremy Caudle
code

I have been a fan of Secret of Mana for the Super Nintendo (Super Famicom) for a long time, and I always wanted to try to build something similar to the game’s circular menu system. I thought it was a clever idea when I first saw it. My version is far from complete, but it was a fun experiment.

View the code:

HTML and JS 
<div class="code-block">
            <nav class="circular-nav">
                <button id="toggle-button"><span>Take Action</span></button>
                <ul id="circle-menu" class="hidden">
                    <li><span role="img" aria-label="fire">&#x1F525</span></li>
                    <li><span role="img" aria-label="down">&#x1F3AF</span></li>
                    <li><span role="img" aria-label="down">&#x1F455</span></li>
                    <li><span role="img" aria-label="down">&#x1F4CA</span></li>
                    <li><span role="img" aria-label="down">&#x1F48A</span></li>
                    <li><span role="img" aria-label="down">&#x1F3AE</span></li>
                    <li><span role="img" aria-label="down">&#x1F4AC</span></li>
                </ul>
            </nav>
        </div>
        
        <script>

            // ---------        
            // Variables
            // ---------
            const toggleButton = document.getElementById('toggle-button');
            const circleMenu = document.getElementById('circle-menu');

            // ---------        
            // Events
            // ---------
            toggleButton.addEventListener('click', () => {
                if(circleMenu.getAttribute('class') === "hidden") {
                    circleMenu.setAttribute('class','');
                } else {
                    circleMenu.setAttribute('class','hidden');
                }
            });

        
        </script>
CSS 
.code-block {
                width: 20em;
                height: 20em;
                border-radius: 50%;
                margin: 1rem auto;
                background-color: rgba(0,0,0,.125);
                position: relative;
                font-family: Arial, Helvetica, sans-serif;
            }

            .circular-nav {
                display: block;

                }
            
            .circular-nav button {
                background-color: rgba(0, 0, 255, 0.66);
                color: white;
                font-weight: 800;
                border: solid 4px white;
                box-shadow: 0 0 0 1px black;
                border-radius: 6px;
                padding: .25rem .5rem;
                cursor: pointer;
                position: relative;
                z-index: 2;
            }

            .circular-nav button:hover, .circular-nav button:focus {
                background-color: rgba(0, 26, 255, 0.66);
            }

            .circular-nav button:active {
                background-color: rgba(0, 23, 231, 0.66);
                transform: translateY(1px);
            }


            .circular-nav ul {
                margin:0;
                padding: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transition: transform .25s ease-out, opacity .3s ease-out;
                opacity: 1;
                z-index: 1;
            }

            .hidden {
                height: 0;
                overflow: hidden;
                opacity: 0;
                transform: scale(0.01);
                list-style: none;
            }

            .circular-nav ul li {
                border-radius: 50%;
                background-color: rgba(0, 0, 255, 0.66);
                border: solid 4px white;
                box-shadow: 0 0 0 1px black;
                font-size: 1.33rem;
                color: orangered;
                width: 3rem;
                height: 3rem;
                padding: auto;
                text-align: center;
                cursor: pointer;
                position: absolute;
                top: -1.5rem;
                left: -1.5rem;
            }

            .circular-nav ul li:hover {
                background-color: rgba(0, 0, 255, 1);
            }

            @supports (display: grid) {
            .code-block, .circular-nav ul li {
                display: grid;
                place-items: center;
            }

            .circular-nav ul li:nth-of-type(1) {transform: translate(0, -5.75rem);}
            .circular-nav ul li:nth-of-type(2) {transform: translate(3.5rem, -3.5rem);}
            .circular-nav ul li:nth-of-type(3) {transform: translate(5.75rem, 0);}              
            .circular-nav ul li:nth-of-type(4) {transform: translate(2.25rem, 3.5rem);}              
            .circular-nav ul li:nth-of-type(5) {transform: translate(-2.25rem, 3.5rem);}              
            .circular-nav ul li:nth-of-type(6) {transform: translate(-5.75rem, 0);}              
            .circular-nav ul li:nth-of-type(7) {transform: translate(-3.5rem, -3.5rem);}              
        }

Tags