Eventuellt menyfix

[garakangas]

Lägger lite kod här från en meny jag gjorde för ett annat projekt, har inte tid att pilla med det ordentligt, men om någon annan vill pilla med det innan jag har tid så finns det här. Fördelen är att

Symboler som används: Menysymbol: ☰ Kryss: ×

HTML/JS:

<!-- Knapp för att öppna menyn, "&#9776;" blir en meny symbol (3 korvar, typ som Ericssons logga)-->
<a><span class="menuopener" onclick="openNav()">Menu &#9776;</span></a>

<!-- JS för att öppna och stänga menyn -->
<script>
    function openNav() {
        document.getElementById("mySidenav").style.height = "100%";
        document.getElementById("sidenav2").style.height = "100%";
        //document.getElementById("mySidenav").style.paddingTop = "60px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.height = "0";
        document.getElementById("sidenav2").style.height = "0";
        document.getElementById("mySidenav").style.paddingTop = "0";
    }
</script>

<!-- Innehållet i menyn -->
<div id="mySidenav" class="sidenav">
        <!-- Knapp för att stänga menyn, "&times;" blir ett kryss-->
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <input type="checkbox" id="campfires" checked> Lägerbålsplatser<br>
        <input type="checkbox" id="programtrails" checked> Programspår<br>
        <input type="checkbox" id="programsites" checked> Programaktiviteter<br>
        <input type="checkbox" id="locations" checked> Platser<br>
        <input type="checkbox" id="assemblies" checked> Mötesplatser<br>
        <button id="toggle-all">Visa/dölj alla</button>
    </div>
    <div id="sidenav2">
    </div>

CSS:

/* Menubar */
    .sidenav {
        height: 0;
        width: 10%;
        position: fixed;
        z-index: 2;
        top: 0;
        right: 0;
        background-color: #cc0;
        color: #fff;
        overflow: hidden;
        transition: 0.5s;
    }

    .sidenav a {
        /*padding: 8px 8px 8px 30px;*/
        padding-left: 15px;
        text-decoration: none;
        /*font-size: 10px;*/
        color: #fff;
        display: block;
        transition: 0.3s;
    }

    .sidenav a:hover {
        color: #f1f1f1;
    }

    .sidenav .closebtn {
        position: relative;
        top: 10px;
        font-size: 36px;
        transition: 0.3s;
        padding-bottom: 10px;
    }

    .menuopener{
        position: absolute;
        top: 10px;
        right: 30px;
        color: white;
        font-size: 30px;
        height: 40px;
        cursor: pointer
    }

    #sidenav2 {
        height: 0;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        opacity: 25%;
        overflow-x: hidden;
        transition: 0.5s;
    }

[Nilskatten]

Inlagt, med minimal fix. Behöver mer fix i form av quality of life.

[danielmartling]

Tror jag fixat till lite