Question

0

143

Views

CSS add html element

I have a small website (Ubuntu, Apache2, PHP) 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?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T07:42:06.569Z

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!

Here's a version that completely replaces the web component with your 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!

0

143

CSS add html element

1 answers

0

Find remote jobs

Andres GPT