Warum erscheint mein Einzugsmenü nicht?

Question

Das ist meine current project auf CodePen.Below ist mein Code. Tut mir leid, wenn es zu lang ist. Ich habe versucht, es kurz zu machen, indem ich die Animation nicht hinzugefügt habe.

Der Wunsch-Effekt ist, wenn Sie auf das Menüsymbol klicken, wird die erste Navigationsleiste eingeblendet und der zweite mit einem Kreuzsymbol wird eingeblendet. Aber ich weiß nicht wo meine zweite Navigationsleiste ist, sie erscheint nicht.

//This function retracts the menu bar with the menu icon and expand the menu bar with close icon. 
 
function open(){ 
 
    document.getElementById("openNav").style.width = "0px"; 
 
    document.getElementById("closeNav").style.width = "20%"; 
 
} 
 
//This thing does the opposite of the above function 
 
function close(){ 
 
    document.getElementById("openNav").style.width = "20%"; 
 
    document.getElementById("closeNav").style.width = "0px"; 
 
}

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
html, body{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 
/*First nav bar of the two. You press the menu icon, this bar slides in and the second nav bar slides out.*/ 
 
.openNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
} 
 
.openBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.open{ 
 
    font-size:50px; 
 
    color: #818181; 
 
} 
 
/*Second nav bar with a close button. You press the close button, the bar slides in and the first nav bar slides out.*/ 
 
.closeNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
} 
 
.closeBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.close{ 
 
    font-size:50px; 
 
    color: #818181; 
 
}

<div class='openNav' id='openNav'> 
 
    <div class='openBox'> 
 
    <div class='open' onclick='open()'>&#9776</div> 
 
    </div> 
 
</div> 
 

 
<div class='closeNav' id='closeNav'> 
 
    <div class='closeBox'> 
 
    <div class='close' onclick='close()'>&times;</div> 
 
    </div> 
 
</div>

Answer 1

ich glaube, das Problem ist, dass Handler in Ihrem Klick, wenn Sie open() nennen es nicht Ihre Funktion aufruft, es document.open() ruft, die die Wirkung vollständig Clearing der hat aktuelle Seite. Wenn Sie einen Debug-Haltepunkt in Ihre Funktion einfügen oder einfach console.log() oder alert() verwenden, um zu testen, werden Sie feststellen, dass Ihr open() überhaupt nicht ausgeführt wird.

Wenn Sie die Funktion einen anderen Namen geben scheint der Code zu arbeiten:

//This function retracts the menu bar with the menu icon and expand the menu bar with close icon. 
 
function openNav(){ 
 
    document.getElementById("openNav").style.width = "0px"; 
 
    document.getElementById("closeNav").style.width = "20%"; 
 
} 
 
//This thing does the opposite of the above function 
 
function closeNav(){ 
 
    document.getElementById("openNav").style.width = "20%"; 
 
    document.getElementById("closeNav").style.width = "0px"; 
 
}

*{ padding:0; margin:0; } 
 
html, body{ height:100%; width:100%; } 
 
/*First nav bar of the two. You press the menu icon, this bar slides in and the second nav bar slides out.*/ 
 
.openNav{ height:100%; width:20%; background:#111; } 
 
.openBox{ width:100%; box-sizing:border-box; padding:calc((100% - 50px)/2); position:relative; bottom:15px; } 
 
.open{ font-size:50px; color: #818181; } 
 
/*Second nav bar with a close button. You press the close button, the bar slides in and the first nav bar slides out.*/ 
 
.closeNav{ height:100%; width:20%; background:#111; } 
 
.closeBox{ width:100%; box-sizing:border-box; padding:calc((100% - 50px)/2); position:relative; bottom:15px; } 
 
.close{ font-size:50px; color: #818181; }

<div class='openNav' id='openNav'> 
 
    <div class='openBox'> 
 
    <div class='open' onclick='openNav()'>&#9776</div> 
 
    </div> 
 
</div> 
 

 
<div class='closeNav' id='closeNav'> 
 
    <div class='closeBox'> 
 
    <div class='close' onclick='closeNav()'>&times;</div> 
 
    </div> 
 
</div>

Sie können auch closeNav() einmal unmittelbar auf Seite laden, um den richtigen Startzustand anrufen möchten. (Das Layout scheint ein bisschen komisch zu sein, da beide Symbole 100% Höhe haben, aber das hängt nicht mit dem Problem zusammen, das Sie zu fragen scheinen. Ich ignoriere das. Beachten Sie, dass ich Ihr CSS nicht geändert habe, ich habe nur Zeilenumbrüche entfernt so wäre es so viel Platz in meiner Antwort nicht in Anspruch nehmen.)

Answer 2

document.getElementById("openNav").addEventListener("click",open); 
 
document.getElementById("closeNav").addEventListener("click",close); 
 
//This function retracts the menu bar with the menu icon and expand the menu bar with close icon. 
 
function open(){ 
 
    document.getElementById("openNav").style.display = "none"; 
 
    document.getElementById("closeNav").style.display = "block"; 
 
} 
 
//This thing does the opposite of the above function 
 
function close(){ 
 
    document.getElementById("openNav").style.display = "block"; 
 
    document.getElementById("closeNav").style.display = "none"; 
 
}

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
html, body{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 
/*First nav bar of the two. You press the menu icon, this bar slides in and the second nav bar slides out.*/ 
 
.openNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
} 
 
.openBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.open{ 
 
    font-size:50px; 
 
    color: #818181; 
 
} 
 
/*Second nav bar with a close button. You press the close button, the bar slides in and the first nav bar slides out.*/ 
 
.closeNav{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
    display:none; 
 
} 
 
.closeBox{ 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    padding:calc((100% - 50px)/2); 
 
    position:relative; 
 
    bottom:15px; 
 
} 
 
.close{ 
 
    font-size:50px; 
 
    color: #818181; 
 
}

<div class='openNav' id='openNav'> 
 
    <div class='openBox'> 
 
    <div class='open'>&#9776</div> 
 
    </div> 
 
</div> 
 

 
<div class='closeNav' id='closeNav'> 
 
    <div class='closeBox'> 
 
    <div class='close'>&times;</div> 
 
    </div> 
 
</div>

Ausprobieren verwenden addEventListeners statt onClick-Attribut. Ich änderte es, um css Eigenschaft anzuzeigen, da das Breitending nicht richtig arbeitet. Hat wahrscheinlich etwas mit deiner Animation zu tun.