HTML - ページ間のナビゲーションバー（ドロップダウンメニュー付き）

私は自分のnavbarを私のプロジェクトの他のすべてのページで読み書きできるファイルに委託しようとしています。 PHPのincludeが動作することがわかりましたが、そのことによってメニュー全体が静的になり、ドロップダウンメニューが失われました。HTML - ページ間のナビゲーションバー（ドロップダウンメニュー付き）

ここに私の単純化されたページは、ドロップダウンメニューとナビゲーションバーで、です：ここ

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <link rel="stylesheet" href="assets/css/main.css" /> 
    </head> 
    <body class="homepage"> 
     <div id="page-wrapper"> 

      <!-- Header --> 
       <div id="header"> 

        <!-- Nav --> 
         <nav id="nav"> 
          <ul> 
           <li><a href="index.html">Home</a></li> 
           <li> 
            <a href="#">Dropdown</a> 
            <ul> 
             <li> 
              <a href="#">1 &rarr;</a> 
              <ul> 
               <li><a href="#">thing 1</a></li> 
               <li><a href="#">thing 2</a></li> 
               <li><a href="#">thing 3</a></li> 
              </ul> 
             </li> 
             <li><a href="#">not dropdown</a></li> 
            </ul> 
           </li> 
          </ul> 
         </nav> 

       </div> 

     </div> 

     <!-- Scripts --> 
      <script src="assets/js/jquery.dropotron.min.js"></script> 

    </body> 
</html>

そして、ドロップダウンに役立ちますジャバスクリプトです：私は別々に私のナビゲーションバーコードを置く

$('#nav > ul').dropotron({ 
     mode: 'fade', 
     speed: 350, 
     noOpenerFade: true, 
     alignment: 'center' 
    });

ファイル&を試してみてください<?php include("nav.php");?>、ドロップダウン部分が機能しません。何か案は？

EDIT：

私もJSでそれを試してみましたが、それがうまくロードが、ドロップダウンを欠い同じ問題を抱えていました：

<nav id="nav"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script> 
      $(function(){ 
      $("#nav").load("nav.html"); 
      }); 
     </script> 
</nav>

が動作しているか、PHPの道を取得する素晴らしいことです。

出典

2017-10-23 Kira Tebbe

各ページのドロップダウンのJavaScriptも含めていますか？ – Conor

あなたのコードの中にdocument.ready関数がありますか？ – Toxide82

WebサーバーでPHPを実行していますか？ブラウザのコンソールやサーバーのエラーログにはどのようなエラーがありますか？ – j08691

私はそれを動作させました！

<nav id="nav"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script> 
    $(function(){ 
    $("#nav").load("nav.html"); 
    }); 
</script> 
</nav>

してから（これはトリックをした）、私はnav.html内のjsファイルで再含ま：index.htmlで、私はナビゲーションバーがもともとあった場所、以下を使用

<ul> 
    <li><a href="index.html">Home</a></li> 
    <li> 
     <a href="#">Dropdown</a> 
     <ul> 
     <li> 
     <a href="#">1 &rarr;</a> 
     <ul> 
      <li><a href="#">thing 1</a></li> 
      <li><a href="#">thing 2</a></li> 
      <li><a href="#">thing 3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">not dropdown</a></li> 
    </ul> 
    </li> 
</ul> 
<script src="assets/js/jquery.dropotron.min.js"></script> 
<script src="assets/js/main.js"></script>

だから私は持っていますjsファイルは、私の `index.htmlの最後にあります。

出典

2017-10-23 16:38:16

HTML - ページ間のナビゲーションバー（ドロップダウンメニュー付き）

答えて

関連する問題