Untitled

navbar vanliga


<head>
    <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="/">Hem</a>
            <a href="/staffs">Staffs</a>
            <button class="dropdown-btn">Test 1-2
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-container">
                <a href="test-1" target='_blank'>Test 1</a>
                <a href="test-2" target='_blank'>Test 2</a>
            </div>
            <button class="dropdown-btn">Test 2-6
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-container">
                <a href="test-3">Test 3</a>
                <a href="test-4">Test 4</a>
                <a href="test-5">Test 5</a>
                <a href="test-6">Test 6</a>
            </div>
        </div>
        <span style="font-size:30px;cursor:pointer;color:white;" onclick="openNav()">&#9776; Meny</span>
</head>
    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }
        /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
        var dropdown = document.getElementsByClassName("dropdown-btn");
        var i;

        for (i = 0; i < dropdown.length; i++) {
            dropdown[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
            } else {
            dropdownContent.style.display = "block";
            }
            });
        }
    </script>