HTML - navbar über Seiten (mit PHP include) mit Dropdown-Menüs?

Ich versuche meine Navbar in eine Datei auszulagern, die ich in allen anderen Seiten für mein Projekt einlesen/einbinden kann. Ich sah, dass PHP's include kann arbeiten, aber das machte mein ganzes Menü statisch und verlor das Dropdown-Menü.HTML - navbar über Seiten (mit PHP include) mit Dropdown-Menüs?

Hier ist meine vereinfachte Seite, mit der Navigationsleiste mit dem Dropdown-Menü:

<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>

Und hier ist das Javascript, das mit dem Drop-Down hilft:

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

Wenn ich meinen navbar Code in eine separaten setzen Datei & versuchen Sie <?php include("nav.php");?>, der Dropdown-Teil funktioniert nicht. Irgendwelche Ideen?

EDIT:

Ich habe versucht, es auch mit js und hatte das gleiche Problem, wo es lädt in Ordnung, aber es fehlt die Drop-Down-:

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

bekommt das, oder den PHP-Weg wäre toll, zu arbeiten .

Quelle

2017-10-23 Kira Tebbe

Sind Sie auch Ihr Javascript für das Dropdown auf jeder Seite? – Conor

sind Sie in einer document.ready-Funktion mit Ihrem Code? – Toxide82

Haben Sie PHP auf Ihrem Webserver? Welche Fehler erhalten Sie in der Browser-Konsole oder in den Fehlerprotokollen Ihres Servers? – j08691

Ich habe es zur Arbeit! In index.html benutzte ich die folgenden, wo die navbar ursprünglich war:

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

und dann (dies der Trick), habe ich wieder aufgenommen von js Dateien im nav.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>

So habe ich die js Dateien beide am Ende meiner `index.html

Quelle

2017-10-23 16:38:16

HTML - navbar über Seiten (mit PHP include) mit Dropdown-Menüs?

Antwort

Verwandte Themen