¿Cómo puedo reutilizar una barra de navegación en varias páginas?

Question 1

Acabo de terminar de hacer mi página de inicio / index.html. Para mantener la barra de navegación donde está y que permanezca mientras los usuarios hacen clic en todas mis páginas. ¿Tengo que copiar y pegar el código de navegación en la parte superior de cada página? ¿O hay otra forma de hacerlo que se vea más limpia?

Navegación HMTL:

<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

Eso es lo que me ayudó. Mi barra de navegación está en la etiqueta del cuerpo. Todo el código de la barra de navegación está en el nav.htmlarchivo (sin html o etiqueta de cuerpo, solo el código de la barra de navegación). En la página de destino, esto va en la headetiqueta:

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

Luego, en la etiqueta del cuerpo, se crea un contenedor con una identificación única y un bloque javascript para cargar nav.htmlen el contenedor, de la siguiente manera:

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

</div>

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

Question 3

Sé que esta es una pregunta bastante antigua, pero cuando tenga JavaScript disponible, puede usar jQuery y sus métodos AJAX.

Primero, cree una página con todo el contenido HTML de la barra de navegación.

A continuación, use el $.getmétodo de jQuery para obtener el contenido de la página. Por ejemplo, digamos que ha puesto todo el HTML de la barra de navegación en un archivo llamado navigation.htmly ha agregado una etiqueta de marcador de posición (Me gusta <div id="nav-placeholder">) en su index.html, entonces usaría el siguiente código:

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

Question 4

Puede usar php para crear un sitio web de varias páginas.

Cree un header.php en el que debe poner todo su código html para menús y redes sociales, etc.
Inserte header.php en su index.php usando el siguiente código

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

(El código anterior volcará todo el código html antes de este) El contenido del cuerpo de su sitio.

Del mismo modo, puede crear pies de página y otros elementos con facilidad. PHP incorporado admite código html en sus extensiones. Entonces, mejor aprenda esta solución fácil.

Question 5

Una técnica muy antigua pero bastante simple es utilizar "Incluye del lado del servidor" , para incluir páginas HTML en una página de nivel superior que tiene la .shtmlextensión. Por ejemplo, este sería su index.shtmlarchivo:

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

Sí, es patético, pero funciona. Recuerde habilitar el soporte SSI en la configuración de su servidor HTTP ( así es como se hace para Apache ).

Question 6

Brando ZWZ proporciona excelentes respuestas para manejar esta situación.

Re: Misma barra de navegación en varias páginas Agosto 21, 2018 10:13 AM | LINK

Hasta donde yo sé, hay múltiples soluciones.

Por ejemplo:

El código completo para la barra de navegación está en el archivo nav.html (sin ninguna etiqueta html o body, solo el código para la barra de navegación).

Entonces podríamos cargarlo directamente desde jquery sin escribir muchos códigos.

Me gusta esto:

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

    </div>

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

Solución 2:

Puede usar código JavaScript para generar toda la barra de navegación.

Me gusta esto:

Código Javascript:

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

No sé si funcionará para usted, pero a mí me funciona. Intente colocar los códigos de navegación sin ningún encabezado o etiqueta de cuerpo (solo el código donde comenzó y terminó la barra de navegación). Lo que sucederá es que colocará por separado los códigos para la barra de navegación. Digamos que ya tiene los códigos de navegación en navigation.html y los incluirá en otra página, digamos que sería index.php. Para incluirlo, colóquelo dentro de la etiqueta del cuerpo y la barra de navegación se cargaría en él.