html - sublime - ¿Cómo puedo reutilizar una barra de navegación en varias páginas?
crear menu en html ejemplos (6)
Brando ZWZ ofrece excelentes respuestas para manejar esta situación.
Re: Misma barra de navegación en varias páginas Aug 21, 2018 10:13 AM | LINK
Que yo sepa, 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 el 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ón2:
Puede usar el 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
Acabo de terminar de hacer mi página de inicio / index.html. Para mantener la barra de navegación donde está y mantenerla 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 para que se vea más limpio?
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>
Esto es lo que me ayudó.
Mi barra de navegación está en la etiqueta del cuerpo.
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).
En la página de destino, esto va en la etiqueta de la
head
:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Luego, en la etiqueta del cuerpo, se
nav.html
un contenedor con una identificación única y un bloque javascript para cargar el
nav.html
en 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-->
No sé si funcionará para ti, pero funciona para mí. Intente colocar los códigos de navegación sin ningún encabezado o etiqueta de cuerpo (solo el código donde la barra de navegación comenzó y terminó). Lo que sucederá es que colocará por separado los códigos de la barra de navegación. Digamos que ya tiene los códigos de navegación en navigation.html y lo incluirá en otra página, digamos que sería index.php. Para incluirlo, colóquelo dentro de la etiqueta del cuerpo y se cargará la barra de navegación.
Puede usar php para hacer 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.
- Inserta header.php en tu index.php usando el siguiente código
<? php include ''header.php''; ?>
(El código anterior volcará todo el código html antes de esto) El contenido del cuerpo de su sitio.
- Del mismo modo, puede crear pie de página y otros elementos con facilidad. PHP incorporado soporta código html en sus extensiones. Entonces, mejor aprende esta solución fácil.
Sé que esta es una pregunta bastante antigua, pero cuando tienes JavaScript disponible, puedes 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 método
$.get
jQuery para obtener el contenido de la página.
Por ejemplo, supongamos que ha colocado todo el HTML de la barra de navegación en un archivo llamado
navigation.html
y ha agregado una etiqueta de marcador de posición (como
<div id="nav-placeholder">
) en su
index.html
, luego 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>
Una técnica muy antigua pero lo suficientemente simple es usar
"Incluye del lado del servidor"
, para incluir páginas HTML en una página de nivel superior que tenga la extensión
.shtml
.
Por ejemplo, este sería su archivo
index.shtml
:
<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 cojo, pero funciona. Recuerde habilitar el soporte SSI en la configuración de su servidor HTTP ( esta es la forma de hacerlo para Apache ).