Wie kann ich eine Navigationsleiste auf mehreren Seiten wiederverwenden?

Question 1

Ich habe gerade meine Homepage / index.html Seite fertiggestellt. Damit die Navigationsleiste dort bleibt, wo sie sich befindet, bleibt sie erhalten, während Benutzer durch alle meine Seiten klicken. Muss ich den Navigationscode kopieren und oben auf jeder Seite einfügen? Oder gibt es eine andere Möglichkeit, die sauberer aussehen würde?

HMTL nav:

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

Question 2

Das hat mir geholfen. Meine Navigationsleiste befindet sich im Body-Tag. Der gesamte Code für die Navigationsleiste befindet sich in der nav.htmlDatei (ohne HTML- oder Body-Tag nur der Code für die Navigationsleiste). Auf der Zielseite steht dies im headTag:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Dann wird im Body-Tag ein Container mit einer eindeutigen ID und einem Javascript-Block erstellt, um den nav.htmlwie folgt in den Container zu laden :

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Question 3

Ich weiß, dass dies eine ziemlich alte Frage ist, aber wenn Sie JavaScript zur Verfügung haben, können Sie jQuery und seine AJAX-Methoden verwenden.

Erstellen Sie zunächst eine Seite mit dem gesamten HTML-Inhalt der Navigationsleiste.

Verwenden Sie als Nächstes die $.getMethode von jQuery , um den Inhalt der Seite abzurufen. Angenommen, Sie haben den gesamten HTML- Code der Navigationsleiste in eine Datei namens aufgerufen navigation.htmlund ein Platzhalter-Tag (Like <div id="nav-placeholder">) in Ihre Datei eingefügt. index.htmlDann würden Sie den folgenden Code verwenden:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

Question 4

Sie können PHP verwenden, um eine mehrseitige Website zu erstellen.

Erstellen Sie eine header.php, in die Sie Ihren gesamten HTML-Code für Menüs und soziale Medien usw. Einfügen sollten
Fügen Sie header.php mit dem folgenden Code in Ihre index.php ein

<? php include 'header.php'; ?>

(Der obige Code gibt den gesamten HTML-Code vorher aus.) Der Inhalt Ihres Site-Körpers.

Ebenso können Sie problemlos Fußzeilen und andere Elemente erstellen. PHP integriert HTML-Code in ihren Erweiterungen. Lernen Sie diese einfache Lösung besser.

Question 5

Eine sehr alte, aber recht einfache Technik ist die Verwendung von "Server-Side Includes" , um HTML-Seiten in eine Seite der obersten Ebene mit der .shtmlErweiterung aufzunehmen. Zum Beispiel wäre dies Ihre index.shtmlDatei:

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

Ja, es ist lahm, aber es funktioniert. Denken Sie daran, die SSI-Unterstützung in Ihrer HTTP-Serverkonfiguration zu aktivieren ( so wird es für Apache gemacht ).

Question 6

Brando ZWZ bietet einige gute Antworten auf diese Situation.

Betreff: Gleiche Navigationsleiste auf mehreren Seiten 21. August 2018, 10:13 Uhr | LINK

Soweit ich weiß, gibt es mehrere Lösungen.

Zum Beispiel:

Der gesamte Code für die Navigationsleiste befindet sich in der Datei nav.html (ohne HTML- oder Body-Tag nur der Code für die Navigationsleiste).

Dann könnten wir es direkt aus der Abfrage laden, ohne viele Codes zu schreiben.

So was:

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

Lösung 2:

Sie können JavaScript-Code verwenden, um die gesamte Navigationsleiste zu generieren.

So was:

Javascript-Code:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

Question 7

Ich weiß nicht, ob es für dich funktioniert, aber es funktioniert für mich. Versuchen Sie, die Navigationscodes ohne Kopf- oder Textkennzeichnung zu platzieren (nur den Code, an dem die Navigationsleiste begann und endete). Was passieren wird, ist, dass Sie die Codes für die Navigationsleiste separat platzieren. Angenommen, Sie haben die Navigationscodes bereits in der Datei navigation.html und fügen sie einer anderen Seite hinzu. Nehmen wir an, das wäre index.php. Um es in das Body-Tag aufzunehmen, wird die Navigationsleiste darauf geladen.