Web-Resources/toggleMenu-navigation at master · erickouassi/Web-Resources · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div id="menuToggle" onclick="toggleMenu()">&#9776;</div>
        <div class="menu" id="menu">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="leaderboard.html">Leaderboard</a>
            <a href="form.html">Form</a>
            <a href="contact.html">Contact</a>
        </div>


<script>
var style = document.createElement('style');
style.innerHTML = `
    #menu {
        display: none;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    #menu a {
        margin: 10px 0;
        text-decoration: none;
        color: #333;
        font-size: 18px;
    }
`;
document.head.appendChild(style);

function toggleMenu() {
    const menu = document.getElementById("menu");
    if (menu.style.display === "none" || menu.style.display === "") {
        menu.style.display = "flex";
    } else {
        menu.style.display = "none";
    }
}
</script>