Home/ Questions/Q 8929283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T08:38:26+00:00

I’m making a web application, and I have to make a menu that is

  • 0

I’m making a web application, and I have to make a menu that is repeated on multiple pages. But every time I make a change in any menu I have to edit all pages. Javascript may create a menu something like this (this is an occurrence):

var divMenu = document.getElementById( "menu" );
//create element <ul> to add to div menu.
var ulMenu = document.createElement("ul");
ulMenu.value =
  "<ul id='nav'>"
  + "<li class='current'><a href='/sytematic_inventory/views/administrador/index.jsp'>Inicio</a></li>"
  + "<li><a href=''>Inventarios</a></li> "
  + "</ul>";

divMenu.appendChild( ulMenu );

How is this possible?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Create a remote .js file and do something along the lines of the following:

    (function(){

    // All items we'd like to add
    var navItems = [
        {href: 'http://google.com', text: 'Google'},
        {href: 'http://bing.com', text: 'Bing'},
        {href: 'http://stackoverflow.com', text: 'StackOverflow'}
    ];

    // A few variables for use later
    var navElem = document.createElement("nav"),
        navList = document.createElement("ul"), 
        navItem, navLink;

    navElem.appendChild(navList);

    // Cycle over each nav item
    for (var i = 0; i < navItems.length; i++) {
        // Create a fresh list item, and anchor
        navItem = document.createElement("li");
        navLink = document.createElement("a");

        // Set properties on anchor
        navLink.href = navItems[i].href;
        navLink.innerHTML = navItems[i].text;

        // Add anchor to list item, and list item to list
        navItem.appendChild(navLink);
        navList.appendChild(navItem);
    }

    // Set first list item as current
    navList.children[0].className = "current";

    // Add list to body (or anywhere else)
    window.onload = function () {
        document.body.appendChild(navElem);
    }

}());

    Demo: http://jsfiddle.net/sDbff/3/

    Then, in any page you’d like to include this, drop in a reference to it:

    <!DOCTYPE html>
<html>
    <head>
        <title>My Site</title>
        <script src="navigation.js"></script>
    </head>
    <body>
        <p>Navigation will be appended here.</p>
    </body>
</html>
    • 0