menu idea

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Main Menu</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body style="background-color: white;">
        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.sVcpgS1I_6kEJvuOecuuUgHaHa%26pid%3DApi&f=1&ipt=00bebfbdf248c4677c3ad5a9f6910bdfbd564aa401d634006f527981942f13d6&ipo=images" id="cursor">

        <a href="#" id="button1" class="button">Button1</a>
        <a href="#" id="button2" class="button">Button2</a>
        <a href="#" id="button3" class="button">Button3</a>
        <a href="#" id="button4" class="button">Button4</a>
        <a href="#" id="button5" class="button">Button5</a>

        <script src="menu_select.js"></script>
    </body>
</html>

CSS

.button {
    display: block;
    z-index: -1;
    position: absolute;
    border: 4px solid;
    border-radius: 45%;
    text-decoration: none;
    text-align: center;
    font: bold;
    font-size: medium;
    background-color: white;
}

#button1 {
    width: 30%;
    height: 15%;
    top: 40%;
    left: 15%;
    transform: translate(-40%, -15%);
}

#button2 {
    width: 30%;
    height: 15%;
    top: 75%;
    left: 25%;
    transform: translate(-75%, -25%);
}

#button3 {
    width: 30%;
    height: 15%;
    top: 80%;
    left: 85%;
    transform: translate(-80%, -85%);
}

#button4 {
    width: 30%;
    height: 15%;
    top: 40%;
    left: 75%;
    transform: translate(-40%, -75%);
}

#button5 {
    width: 30%;
    height: 15%;
    top: 10%;
    left: 35%;
    transform: translate(-10%, -35%);
}

#cursor {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 40%;
    left: 40%;

    transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}

JavaScript

const angles = {        // Dictionary of where we want our static angle positions to be
    button1: 290,
    button2: 222,
    button3: 115,
    button4:  75,
    button5:  0
}

var cursor = document.getElementById("cursor")
var currentAngle = 0;

$(".button").hover(function(){      // When mouse enters button area

    let next_angle = angles[this.id];
    let turn_radius = 0;
    let clockwise = (Math.abs(next_angle - currentAngle) < 180) ? true : false; // Calculates which direction is less degrees from source and returns boolean

    if (clockwise){
        turn_radius = (next_angle - currentAngle);
    }
    else {
        turn_radius = "-" + (360 - Math.abs(next_angle - currentAngle));
    }
    cursor.style.rotate = turn_radius +"deg";
});