Tutorial on embedding navigation menu from an external file without using Wamp; all the code should be executed on the client-side

Question

Tutorial on embedding navigation menu from an external file without using Wamp; all the code should be executed on the client-side

I am trying to find a way to store my top navigation menu in an external file for my static HTML website. I want to be able to easily update the menu and see those changes reflected on all pages without needing to upload them to a server. It's important that I can view the web pages locally as well, without relying on additional software installations.

I have come across solutions using PHP, SSI, and frames to address this issue, but none of them seem to fit my specific requirements. Frames are outdated and not ideal for SEO purposes, while PHP and SSI only work once the site is uploaded to a server.

Frames are out of the discussion due to their impact on SEO and obsolescence with HTML5.
PHP and SSI won't function locally and can only be used after uploading the site to a server.

After exploring various options, I believe storing the entire menu in an external JS file could be a viable solution. However, most existing examples still include some parts of the menu within the HTML file. Is it possible to have all menu items stored in a JS file and simply call that file in my HTML without including the actual menu items directly in the HTML?

I have basic knowledge of JavaScript and believe I can make necessary adjustments to a generic example to suit my needs.

javascript html css web menu

Answer 1

Answer №1

navigation.html

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="active1.html">Contact</a></li>
    <li><a href="active2.html">About</a></li>
    <li><a href="active3.html">Portfolio</a></li>
</ul>

index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div id="nav"></div>

Javascript file:

$(function() {

    $("#nav").load("navigation.html");

    function activateNavigation() {
        var pageUrl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
         $("#nav ul li a").each(function(){
              if($(this).attr("href") == pageUrl || $(this).attr("href") == '' )
              $(this).addClass("active");
         });
    }

    setTimeout(function() {
        activateNavigation();
    }, 100);

});

The setTimeout allows the page to load and then executes the function to determine which link is active, allowing you to apply a CSS class:

#nav ul li a.active {
        color: #ff0000;
        font-weight: bold;
    }

Answer 2

navigation.html

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="active1.html">Contact</a></li>
    <li><a href="active2.html">About</a></li>
    <li><a href="active3.html">Portfolio</a></li>
</ul>

index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div id="nav"></div>

Javascript file:

$(function() {

    $("#nav").load("navigation.html");

    function activateNavigation() {
        var pageUrl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
         $("#nav ul li a").each(function(){
              if($(this).attr("href") == pageUrl || $(this).attr("href") == '' )
              $(this).addClass("active");
         });
    }

    setTimeout(function() {
        activateNavigation();
    }, 100);

});

The setTimeout allows the page to load and then executes the function to determine which link is active, allowing you to apply a CSS class:

#nav ul li a.active {
        color: #ff0000;
        font-weight: bold;
    }

Answer 3

Answer №2

nav.html // simply include the nav section without any extra tags.

<nav> bla bla </nav>

index.html

<!doctype html>
<html>

  <head>
    <title>onload test</title>
    <script>

    window.onload = function(){
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
             document.getElementById('includeNav').innerHTML= '<object type="text/html" data="nav.html"></object>';
        }
    }

    xhttp.open('POST', 'nav.html', true); // method, location, async
    xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhttp.send(); }
    </script>
  </head>


  <body>
    <p>The load event fires when the document has finished loading!</p>
    <div id="includeNav"></div>
  </body>
</html>

Give it a shot. It could be the solution you're looking for.

Answer 4

nav.html // simply include the nav section without any extra tags.

<nav> bla bla </nav>

index.html

<!doctype html>
<html>

  <head>
    <title>onload test</title>
    <script>

    window.onload = function(){
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
             document.getElementById('includeNav').innerHTML= '<object type="text/html" data="nav.html"></object>';
        }
    }

    xhttp.open('POST', 'nav.html', true); // method, location, async
    xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhttp.send(); }
    </script>
  </head>


  <body>
    <p>The load event fires when the document has finished loading!</p>
    <div id="includeNav"></div>
  </body>
</html>

Give it a shot. It could be the solution you're looking for.

Answer 5

Answer №3

If you're interested, delving into HTML Imports could be worthwhile.

Method 1: A basic implementation could look something like this:

index.html (or any other page):

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="nav.html">
</head>
<body>
    My Page
    <script>
        var link = document.querySelector('link[rel="import"]');
        var nav = link.import.querySelector('nav');
        document.body.appendChild(nav.cloneNode(true));
    </script>
</body>
</html>

nav.html:

<nav>
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
    </ul>
</nav>

More insights at: http://www.html5rocks.com/en/tutorials/webcomponents/imports/

Method 2: Utilize the Web Components API fully and create your own HTML element, making usage across files more streamlined (despite a slightly more complex nav.html).

index.html (or any other page):

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="nav.html">
</head>
<body>
    My Page
    <my-nav></my-nav>
</body>
</html>

nav.html

<nav>
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
    </ul>
</nav>
<script>
    var navProto = Object.create(HTMLElement.prototype);
    var navDoc = document.currentScript.ownerDocument;
    navProto.createdCallback = function() {
        var shadow = this.createShadowRoot();
        var nav = navDoc.querySelector('nav');
        var clone = document.importNode(nav, true);
        shadow.appendChild(clone);
    };
    document.registerElement('my-nav', { prototype: navProto });
</script>

REMARK: One caveat to consider in both options is browser compatibility:

For method 1 and 2: http://caniuse.com/#feat=imports
For method 2: http://caniuse.com/#feat=custom-elements

Mainly supported by Chrome (including Android) and Opera. Regrettably, using HTML imports without a web server isn't feasible due to browser security settings. You might encounter a console error similar to this:

Imported resource from origin 'file://' has been blocked 
from loading by Cross-Origin Resource Sharing policy: 
Invalid response. Origin 'null' is therefore not allowed access.

Thus, starting a simple web server such as the nodejs module http-server or employing a Chrome extension like Chrome Dev Editor with a built-in web server becomes necessary https://chrome.google.com/webstore/detail/chrome-dev-editor/pnoffddplpippgcfjdhbmhkofpnaalpg?utm_source=chrome-app-launcher-info-dialog

Answer 6

If you're interested, delving into HTML Imports could be worthwhile.

Method 1: A basic implementation could look something like this:

index.html (or any other page):

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="nav.html">
</head>
<body>
    My Page
    <script>
        var link = document.querySelector('link[rel="import"]');
        var nav = link.import.querySelector('nav');
        document.body.appendChild(nav.cloneNode(true));
    </script>
</body>
</html>

nav.html:

<nav>
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
    </ul>
</nav>

More insights at: http://www.html5rocks.com/en/tutorials/webcomponents/imports/

Method 2: Utilize the Web Components API fully and create your own HTML element, making usage across files more streamlined (despite a slightly more complex nav.html).

index.html (or any other page):

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="nav.html">
</head>
<body>
    My Page
    <my-nav></my-nav>
</body>
</html>

nav.html

<nav>
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
    </ul>
</nav>
<script>
    var navProto = Object.create(HTMLElement.prototype);
    var navDoc = document.currentScript.ownerDocument;
    navProto.createdCallback = function() {
        var shadow = this.createShadowRoot();
        var nav = navDoc.querySelector('nav');
        var clone = document.importNode(nav, true);
        shadow.appendChild(clone);
    };
    document.registerElement('my-nav', { prototype: navProto });
</script>

REMARK: One caveat to consider in both options is browser compatibility:

For method 1 and 2: http://caniuse.com/#feat=imports
For method 2: http://caniuse.com/#feat=custom-elements

Mainly supported by Chrome (including Android) and Opera. Regrettably, using HTML imports without a web server isn't feasible due to browser security settings. You might encounter a console error similar to this:

Imported resource from origin 'file://' has been blocked 
from loading by Cross-Origin Resource Sharing policy: 
Invalid response. Origin 'null' is therefore not allowed access.

Thus, starting a simple web server such as the nodejs module http-server or employing a Chrome extension like Chrome Dev Editor with a built-in web server becomes necessary https://chrome.google.com/webstore/detail/chrome-dev-editor/pnoffddplpippgcfjdhbmhkofpnaalpg?utm_source=chrome-app-launcher-info-dialog

Answer 7

Answer №4

Here is a solution I shared in a previous post:

To achieve this without the need for a server side language, you can utilize a javascript library such as W3Data. Simply add the w3-include-html attribute to your div element and you're all set!

For instance, if your menu content is stored in a file named menu.html, you can implement it like so:

<div w3-include-html="menu.html"></div>

Answer 8

Here is a solution I shared in a previous post:

To achieve this without the need for a server side language, you can utilize a javascript library such as W3Data. Simply add the w3-include-html attribute to your div element and you're all set!

For instance, if your menu content is stored in a file named menu.html, you can implement it like so:

<div w3-include-html="menu.html"></div>

Answer 9

Answer №5

A great tool to consider for this task is JsRender/JsViews.

Answer 10

A great tool to consider for this task is JsRender/JsViews.

Tutorial on embedding navigation menu from an external file without using Wamp; all the code should be executed on the client-side

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Making a Highcharts Pie Chart Legend Embedded Within a Table

Tips for sending a query from JavaScript code to a server using AJAX

Basic demonstration of AngularJS including a module and controller showcased on jsFiddle

Stacking images with CSS styling

Sending data from the server to the client in MVC using C#

Tips for validating user input in AngularJS without using a form tag

Transferring information submitted in a form to a service using AngularJS

What is the best way to verify the success or error callbacks of an AJAX request?

Observing data retrieved via ajax in Internet Explorer 9

What is the reason behind my page automatically scrolling to the bottom when it loads?

What is the technical process behind conducting A/B testing at Optimizely?

Using Protractor to extract text from multiple paragraphs

Steps to update the package version in package.json file

Utilizing Ajax to Populate a Dropdown List with Data

Eliminating empty space within my container

The hover effect for a :before class is not functioning as intended

Learning the integration of vuex with defineCustomElement in Vue 3.2

Toggling markers according to form selections is not functioning

WordPress: Struggling to Show Sub-Menu on Hover Feature Not Functioning

Retrieving information from controller to HTML page in AngularJS