Rahmen mit Optionen zur Menü-Taste hinzufügen?

Question

Wie füge ich einen Rahmen auf der linken Seite der Website mit Optionen nach dem Drücken der Menü-Taste hinzu?

hier die relevanten HTML

<div class="container" onclick="myFunction(this)"> 
    <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div> 

hier die entsprechende CSS-

.container { 
    display: inline-block; 
    cursor: pointer; 
} 

.bar1, .bar2, .bar3 { 
    width: 35px; 
    height: 5px; 
    background-color: #fff; 
    margin: 6px 0; 
    transition: 0.4s; 
} 

/* Rotate first bar */ 
.change .bar1 { 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; 
    transform: rotate(-45deg) translate(-9px, 6px) ; 
} 

/* Fade out the second bar */ 
.change .bar2 { 
    opacity: 0; 
} 

/* Rotate last bar */ 
.change .bar3 { 
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ; 
    transform: rotate(45deg) translate(-8px, -8px) ; 
} 

Hier ist der relevante JS

function myFunction(x) { 
    x.classList.toggle("change"); 
} 

Answer 1

Als ich versuchte, den Code ist, Ich habe die Folge bekommen Fehlermeldung: "ReferenceError: myFunction ist nicht definiert"

Eine Lösung besteht darin, den Funktionsaufruf zu überspringen und den Toggle-Code direkt innerhalb des onclick-Parameters zu verschieben.

<div class="container" onclick="this.classList.toggle('change')"> 
    <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div> 

Hier ist ein funktionierendes Beispiel dafür: https://jsfiddle.net/k84vcbu2/

Hinweis: Der Onclick Parameter generell abgeraten, weil es JavaScript in Ihre HTML mischt. Vielleicht ist der beste Ansatz ist, die Onclick Parameter von Ihrem HTML und weisen Sie das Click-Ereignis von JavaScript zu löschen:

document.getElementById('container1').addEventListener('click',function() { 
    this.classList.toggle('change') 
    }) 

Und hier ist das editierte HTML (I die „Onclick“ Parameter entnommen und ein Parameter „ID“)

<div class="container" id="container1"> 
    <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div>