この応答性の高いナビゲーションバーを修正するにはどうすればよいですか？

Question

（悪い投稿のためのflamerinoは、私の最初のポストです：P）

私はサイトで作業していましたが、一度私は自分の考えをどのレイアウトで使用するかを決めました。応答する。私はナビゲーションバーから始めました。 （最小幅：1050px）では、通常の水平トップナビを作った。 （max-width：1050px）のために、私は.activeを表示し、残りをアイコンの背後に隠すことに決めました。これまでのところ、1つのことを除いて、見栄えがよくなっています。ボタンをクリックしても、残りのリンクは表示されません。私はそれのために少しのJavaScriptを使いました、残りは純粋なHTMLとCSSです。

<nav class="topnavbar" id="mytopnavbar"> 
 
     <a href="index.html" class="active">Home</a> 
 
     <a href="over.html">Over mezelf</a> 
 
     <a href="i1talent.html">I 
 
      <sup>1</sup>-Talent</a> 
 
     <a href="cv.html">CV</a> 
 
     <a href="portfolio.html">Portfolio</a> 
 
     <a href="hobbies.html">Hobbies</a> 
 
     <a href="links.html">Links</a> 
 
     <a href="contact.html">Contact</a> 
 
     <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
    </nav>

.topnavbar { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.topnavbar a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-align: none; 
 
    font-size: 17px; 
 
    width: 12.5%; 
 
    text-decoration: none; 
 
} 
 

 
.topnavbar a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.topnavbar .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .topnavbar a:not(:first-child) { 
 
     display: none; 
 
    } 
 
    .topnavbar a.icon { 
 
     float: right; 
 
     display: block; 
 
    } 
 
    .topnavbar.responsive { 
 
     position: relative; 
 
    } 
 
    .topnavbar.responsive .a.icon { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; 
 
    } 
 
    .topnavbar.responsive a { 
 
     float: left; 
 
     display: block; 
 
     text-align: left; 
 
    } 
 
}

function RespNav() { 
 
    var x = document.getElementById("mytopnavbar"); 
 
    if (x.className === "topnavbar") { 
 
     xclassName += "responsive"; 
 
    } else { 
 
     x.className = "topnavbar" 
 
    } 
 
}

Answer 1

xclassName += "responsive"; 

1. あなたはx後.を忘れてしまいました。 （strict modeを有効にしていた場合、これはブラウザの開発者ツールのコンソールに表示される致命的なエラーでした）。
2. class="topnavbar responsive"というクラス属性の値に"responsive"が追加されます。そこには2つのクラスを割り当てるためのスペースが必要です。