Load external Navigation bar into multiple html pages

Question

I have created a html page containing only the navgation bar and the actions to take on it.
I want to load this html page inside a div with an id of nav

However up to recently I used 3 things myself:

include_once(); but this is php i dont want to change an html page to a php page only for one line of code
java script load function (however iv read this and its not recommended )
jQuery get function , which worked with simple html file but since in this file i have included the css and java script inside only one element will show which is the button.

Any solution or suggestion?

nav.html :

<!doctype html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>nav</title>
     <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-
        awesome/4.7.0/css/font-awesome.min.css">
     <style>
        .Layer {
          height: 100%;
          width: 0;
          z-index: 1;
          position: fixed;
          left: 0;
          top: 0;
          background-color: rgb(0,0,0); 
          background-color: rgba(0,0,0, 0.9); 
          overflow-x: hidden;
          transition: 0.5s; 
          display: flex;
          flex-direction: row-reverse;
       }

      .Content {
         position: relative;
         margin: auto;
      }

     .Content a {
        margin: auto;
        text-decoration: none;
        font-size: 36px;
        transition: 0.3s
    }

    .Content a:hover, .Content a:focus {
      color: #f1f1f1;
    }

    .Layer .closebtn {
      font-size: 60px;
    }   
  </style>
</head>
<body>
  <div id="myNav" class="Layer">

  <a href="javascript:void(0)" class="closebtn" onClick="closeNav()">
    <i class="fa fa-window-close" aria-hidden="true"></i>
  </a>

  <nav class="Content">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">About this</a></li>
      </ul> 
  </nav>        
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

  <script>
    function openNav() {
      document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.width = "0%";
    }
  </script>      
</body>
</html>

jquery :

// JavaScript Document
window.onload = function()
{
    "use strict";
    //$("#nav").load("nav.html");
    $.get("navbar.html",function(data)
          {
        document.getElementById("nav").innerHTML=data;

    });
};

You can use Jquery .load function or i suggest this guide w3schools.com/howto/howto_html_include.asp — Ciccio
– Ciccio, Commented Jul 27, 2017 at 15:38
The ID in HTML is "myNav" but you're trying to get "nav". I would also suggest using jQuery to get the document and assign HTML as so: $("#myNav").html(data); — Kaamil Jasani
– Kaamil Jasani, Commented Jul 27, 2017 at 15:42
@SchoolBoy nah this is from two separate files i have checked them , its correct . — Mansour Farokhinezhad
– Mansour Farokhinezhad, Commented Jul 27, 2017 at 15:46
@Ciccio but ive read its not a professional way and not recommended , Thank you for the link ill read the whole thing — Mansour Farokhinezhad
– Mansour Farokhinezhad, Commented Jul 27, 2017 at 15:48

Kaamil Jasani · Accepted Answer · 2017-07-27 16:03:09Z

2

The following code works for me:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="include"></div>
    <script>
        window.onload = function(){
            $.get("inc.html", function(data){
                $("#include").html(data);
            })
        }
    </script>
</body>
</html>

inc.html:

<p>This was included using jQuery.</p>

I know you said you have checked names, but I see nav.html in your question, and don't see the navbar.html that you are trying to include. I have a strong feeling you are misnaming something somewhere.

answered Jul 27, 2017 at 16:03

Kaamil Jasani

4645 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Todd Hoff Over a year ago

Any html after the include div isn't displayed in chrome. Is that normal?

Kaamil Jasani Over a year ago

@ToddHoff No, this should not happen. Perhaps you would like to post a new question with the details?

Todd Hoff Over a year ago

In preparing the test case I realized I had not closed the div, so it was overwriting everything. Doh! Thanks.

Collectives™ on Stack Overflow

Load external Navigation bar into multiple html pages

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related