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

83

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>
html navbar blackRob4953
fuente
Si. Tenga en cuenta que cuando un usuario hace clic en un enlace en su navegación, su servidor / sistema local está enviando el archivo indicado por el enlace para ser descargado y mostrado. Cuando about.htmlhagan clic en "Acerca de" , el navegador cargará. Por tanto, debería contener la misma navegación.
Purag
1
si tiene un lenguaje del lado del servidor, se puede poner este código en una plantilla e incluir en todas las páginas más use js angulares para hacer esta directiva
joyBlanks
3
Busco lo mismo. Es una pena que en 2017 no podamos hacer esto con un sitio web basado en un cliente. Microsoft ha tenido el concepto de una página maestra (_layouts en la versión actual) desde siempre. Parece que una "página contenedor" del lado del cliente no sería ridícula.
Ron

Respuestas:

76

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-->
Ramtin
fuente
Hola. No sé nada sobre jquery / javascript, pero solo quería probar esto. Intenté hacer exactamente lo que dijiste. Tengo mi menú de navegación en una página sin ninguna otra etiqueta e incluí el resto del código en el encabezado / cuerpo de mi página de índice (página de índice simple). Sin embargo, no carga mi barra de navegación en todas las páginas. ¿Alguna idea de lo que podría hacer mal? Gracias !
Lay
@Lay, ¿se nota en absoluto? Tengo que decirles que mientras que el desarrollo (cargando la página localmente) este código a menudo no funciona. ¿Ha colocado este código en un servidor?
Ramtin
3
Un poco fuera de tema, y ​​perdona mi ignorancia: si codificas la versión de jQuery como lo hiciste en tu respuesta:, <script src="https://code.jquery.com/jquery-1.10.2.js"></script>¿qué sucede con tu página cuando salga la versión 1.10.3 o 1.11.0?
Laryx Decidua
1
@LaryxDecidua Entonces sigue funcionando. Siempre cargar la última versión corre el riesgo de romper la página. Piense en cambios importantes entre versiones. Por lo tanto, se recomienda realizar pruebas al cambiar a una versión diferente.
Markus Pscheidt
1
Usé el código anterior en index.html en una PC local, lo probé en Chrome, me dio un error a continuación y el nav.html no se pudo cargar. jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.¿Alguna idea?
KenyKeny
35

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>
Jacques Marais
fuente
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.
Sachin Kanungo
fuente
1
Entonces, ¿están diciendo que debería convertir todo esto a PHP, en lugar de múltiples páginas HTML para mi sitio? Es mi primer sitio, y sé html, por eso lo usé, pero si debería ser PHP, entonces debería ser PHP ... Entonces, ¿cuál debería ser?
blackRob4953
Este es un php muy básico que puedes aprender fácilmente. No enfrentarás pesadillas ni una sola vez cuando conviertas tu lado para usar un lenguaje del lado del servidor. Recomiendo esto Pero si tiene la intención de usar solo html, considere .shtml para problemas pequeños, aún lo encuentro torpe para sitios web en crecimiento.
Sachin Kanungo
Okay. Ahora que esta página es html. ¿Cómo lo convierto a php? ¿Son algunas entradas o tengo que rehacer todas mis etiquetas? Y si es así, ¿cómo ...? Así que no lo
arruino
1
Cambie la extensión a .php y listo. use las siguientes llaves de código para ingresar el código php. <?php include 'header.php'; ?>Vaya a php.net o w3schools para obtener información básica.
Sachin Kanungo
3

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

Laryx Decidua
fuente
3

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


fuente
-5

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.

qw12
fuente
2
No está del todo claro lo que sugieres aquí. Proporcione muestras de marcado.
isherwood
Soooooooo .... ¿ Tu respuesta es la misma que la que publicó @Ramtin? Si es así, lo entiendo, pero debe agregar algo de claridad o eliminar la respuesta por completo.
Momoro