Navbar Menu折りたたみが開かない

私の目的は、いくつかのメニューリンクを含むウェブサイトのナビゲーションバーをコーディングすることです。小さいデイスクには、クリックするとメニューリンクが折りたたまれたメニューバーが表示されます。Navbar Menu折りたたみが開かない

私はこれを行う方法を学ぶためにYouTubeのチュートリアルに従いました。チュートリアルのコードと複数回コードを比較しましたが、どういうわけか私のメニューは崩壊したくありません。

YouTubeチュートリアルのコードをCodepenにコピーすると、折りたたみメニューが完全に正常に動作するため、問題がブートストラップが読み込まれていないことを確認できます。

誰かが自分のコードを見て、私が間違ったことをヒントを与えることができたら、私は多くを感謝します。

<!--DOCTYPE html --> 
<head> 
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
</head> 

<body> 
    <header> 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
     <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand">Company Brand</a> 

     </div> 

     <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="#">Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Menu 4</a> 
      </li> 
      <li> 
       <a href="#">Menu 5</a> 
      </li> 
      <li> 
       <a href="#">Menu 6</a> 
      </li> 
      </ul> 

     </div> 

     </div> 
    </div> 
    </header> 

</body> 

<footer> 
</footer>

事前に感謝します。種類は、あなたが質問で、あなたの完全なコードを掲載した場合、その後多くのことが間違ってありますRysio

出典

2017-01-10 Rysio

あなたはどのCSSが含まれていない、CSSクラスの使用一見あなたがBootstrap-を使用しているかのようにあなたがより多くの完全なコードを投稿することができれば、それは他の人に役立つだろう。メニューのカスタムCSSはありますか？あなたはブートストラップだけを使用していますか？またあなたのhtmlは無効です。 '

について。

あなたは<html> タグ内にご<head>と<body>タグをラップする必要があります。
<body>の中に<footer>が表示されます。
質問には投稿していませんが、のスクリプトを含める必要があります。 BootStrapスクリプトの前には常にjQueryスクリプトが含まれています。 bootstrap.jsには、jQueryからまでの機能が必要です。また、それはここだけ </body>

前にそれらを含めることは常に良いですが、私はコードが正しいことを示すために、CDNのスクリプトやCSSが含まれています。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
<header> 
 

 

 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     <a href="#" class="navbar-brand">Company Brand</a> 
 

 
     </div> 
 

 

 

 
     <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
       <a href="#">Menu 1</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 2</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 3</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 4</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 5</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 6</a> 
 
       </li> 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</header> 
 

 
<footer> 
 
</footer> 
 

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</body> 
 
<html>

出典

2017-01-10 12:17:26 ab29007

@Rysio問題が解決したら、その答えを忘れないでください。あなたは私の答えの左側にあるチェックマーク（右のサイン）をクリックすることを知っています。 – ab29007

こんにちはKittyCat！多くのお返事をいただきありがとうございます。私はあなたに言及された変更を処理した、とにかく崩壊メニューが動作していない購入する。私はCodePenを使用しているので、ブートストラップとJQuereyスクリプトは含まれていませんでした。それらは自動的にそこに読み込まれます。外部コードをコピーすると、折りたたみメニューが（スクリプトを読み込まずに）headタグで動作しています）。コードはあなたに適していますか？エラーは見つかりませんでしたか？ – Rysio

codepenは自動的にスクリプトを含みません。設定を使用して追加する必要があります。 2〜3分待つ。私はここにコードペーンを追加してあなたを見せます。 – ab29007

Navbar Menu折りたたみが開かない

答えて

関連する問題