CODEWITHSUNDEEP
javascripthtml
PersonPerson7771
PersonPerson7771

Reputation: 13

How do I create a .js file that creates a navigation bar in html

Ok so, I am creating this site and I want every page to have a navigation bar, how do I make it so that instead of having to write the html for the navigation bar on every page, I just write in the .js file and add this javascript file to every page.

Btw, I'm not asking how to write a navigation bar in html, I've already done that.

Upvotes: 1

Views: 2199

Answers (3)

knicholas
knicholas

Reputation: 530

You can use .insertAdjacentHTML and pass the 'afterbegin' as the "where" to add the html. In this example it's appending as the first element in the body.

const header= "<div>This is my nav</div>"
document.querySelector("body").insertAdjacentHTML("afterbegin", header);
<body>
<div>
 Content of page
<div>
</body>

Edit to add links you can do something like:

  • add anchor tags <a> to each link of your nav
  • get the pathname from the url window.location.pathname
  • query the DOM for [href='${path}'] (where path is the pathname)
  • add the class (in this case active) to reflect the current page
  • style active class appropriately

NOTE: the current window (stackoverflow snippet window) pathname is /js so for this example I used it as the href of the second nav link.

ALSO NOTE: I'm assuming all your html files are in the same directory

//get the pathname from the current url
const path = window.location.pathname

const header= `
   <ul class="nav">
    <li><a href="/home">Home</a></li>
    <li><a href="/js">Javascript</a></li>
   </ul>`
   
document.querySelector("body").insertAdjacentHTML("afterbegin", header);

//add the active class to the anchor tag with the href === path
document.querySelector(`[href='${path}']`).classList.add('active')
.nav li{
  display: inline-block;
}
.nav a{
  text-decoration: none;
  color: black;
}
.nav .active{
  text-decoration: underline;
  color: grey;
}
<body>
<div>
 Content of page
<div>
</body>

Upvotes: 3

juicy-g
juicy-g

Reputation: 496

If your site will contain mostly static content, then I suggest looking into a static site generator (SSG) like Jekyll, Hugo or Gatsby. When I started web development, I used Jekyll and it was very beginner friendly. You could then link from your navbar to your other pages normally.

Upvotes: 0

Tarc&#237;sio Surdi
Tarc&#237;sio Surdi

Reputation: 11

For that, I would recommend that you use a UI library like React, which when paired with React Router will definately yeild you much cleaner code and a better development experience overall.

With that in mind, I know that there is a significant learning curve towards dominating new libs/frameworks, so one way you could do it using vanilla HTML, CSS and JS is by pasting your HTML code for the header into a variable and injecting it by using some DOM methods like .append or .insertAdjecentHTML on a selected element (div, header, body...).

Upvotes: 1

Related Questions