Tengo un sitio web pequeño (Ubuntu, Apache2, PHP) y cada página de este sitio web tiene un contenido similar: el nombre del sitio web en la parte superior, la barra de navegación, alguna información de contacto, como mi correo electrónico, etc. ¿Hay alguna forma de agregar estos elementos a través de CSS? ¿Entonces solo tengo que incluir este archivo CSS y tengo el título en mi página? Aquí hay un ejemplo:
#navigation { position: -webkit-sticky; position: sticky; top: 0; } <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <div id=navigation> <nav> <a href="/somePage.html">Some page</a> <br> <a href="mailto:test@example.org">Contact admin</a> </nav> <h1>Title</h1> </div> Some long test to see, that the navigation bar is sticky <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>Y quiero que esta barra de navegación aparezca en cada página nueva si solo incluyo el archivo CSS. Probé con el siguiente código:
body:before { content: "<nav>[Content]</nav>"; }pero parece que esto solo puede agregar texto. ¿Tal vez podrías lograr esto con JavaScript? Pero si si como?
Puede crear un pequeño componente web que genere exactamente eso:
const template = document.createElement('template'); template.innerHTML = `<div> <nav> <a href="/somePage.html">Some page</a> <br> <a href="mailto:test@example.org">Contact admin</a> </nav> <h1>Title</h1> </div>`; class MyWebsiteHeader extends HTMLElement { constructor() { super(); this.appendChild(template.content.cloneNode(true)); } } customElements.define('my-website-header', MyWebsiteHeader); #navigation { position: -webkit-sticky; position: sticky; top: 0; } <my-website-header id="navigation"></my-website-header> Some long test to see, that the navigation bar is sticky <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> gdfgdfgdfg <br> <br> <br> <br> <br> <br> <br> <br> <br> Hi!Aquí hay una versión que reemplaza completamente el componente web con su HTML:
const template = document.createElement('template'); template.innerHTML = `<div id="navigation"> <nav> <a href="/somePage.html">Some page</a> <br> <a href="mailto:test@example.org">Contact admin</a> </nav> <h1>Title</h1> </div>`; class MyWebsiteHeader extends HTMLElement { constructor() { super(); this.outerHTML = template.innerHTML; } } customElements.define('my-website-header', MyWebsiteHeader); #navigation { position: -webkit-sticky; position: sticky; top: 0; } <my-website-header></my-website-header> Some long test to see, that the navigation bar is sticky <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> gdfgdfgdfg <br> <br> <br> <br> <br> <br> <br> <br> <br> Hi!