CSS add html element
Question
I have a small website and every page on this website has a similar content: The name of the website on the top, the navigation bar, some contact information, like my e-mail, and so on. Is there any way to add these elements through CSS? So that I only have to include this CSS file and I have the title on my page? Here's a example:
#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>
And I want that this navigation bar appears on every new page if I just include the CSS file. I tried with the following code:
body:before {
content: "<nav>[Content]</nav>";
}
but it seems like this can only add text. Maybe you could achieve this with JavaScript? But if yes how?
1 answers
solution1
2 2021-11-18 17:24:53
You can create a small webcomponent that outputs exactly that:
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.