How to create a menu with DOM and Javascript?

Question

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?

While you could use JavaScript to generate a menu on each page, it is a much better solution to use a server-side language to do this. Some of the fallbacks of a JavaScript-based approach: browsers with JavaScript disabled will not be able to see the menu; most search engines will not execute JavaScript and may not be able to spider your whole site. — icktoofay
– icktoofay, Commented Dec 2, 2012 at 1:27

Sampson · Accepted Answer · 2012-12-02 01:49:03Z

3

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>

edited Dec 2, 2012 at 1:49

answered Dec 2, 2012 at 1:29

Sampson

269k76 gold badges546 silver badges570 bronze badges

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

4 Comments

I Hate Lazy Over a year ago

+1 Nice clean (no HTML) solution. Not crazy about the .innerHTML for setting the text, but that's just me. :-) Only thing I see missing is the class on the li element. ...but then I'm not sure which li should get it.

Sampson Over a year ago

@user1689607 I could append a textNode to the anchor, but that would prevent the author from using any html within the anchor text. I missed the class on the list item; I'll toss that in via a update momentarily.

Cristian Over a year ago

How is posible add a submenu in one menu ( navList )?.

Sampson Over a year ago

@ChristianChaparroA You would have to modify your original navItems object to add a submenu property that itself has a series of items. You'd need a recursive function that creates a new navList for any submenu found within the current list item.

Ed Heal · Accepted Answer · 2012-12-02 01:44:30Z

1

You need to create all the DOM items.

e.g.

var divMenu = document.getElementById( "menu" );
//create element <ul> to add to div menu.
var ulMenu = document.createElement('ul');
ulMenu.setAttribute('id', 'nav');
var liItem = document.createElement('li');
liItem.setAttribute('class', 'current');

ulMenu.appendChild(liItem);

var href = document.createElement('a');
href.setAttribute('href', '/sytematic_inventory/views/administrador/index.jsp');

liItem.appendChild(href);

href.appendChild(document.createTextNode('Inicio'));
// Ditto for the other liItem
document.getElementById('menu').appendChild(ulMenu);

Then put this into an external file. i.e.

<script type="text/javascript" src="menu.js"></script>

edited Dec 2, 2012 at 1:44

answered Dec 2, 2012 at 1:27

Ed Heal

60.3k18 gold badges91 silver badges137 bronze badges

Comments

br3nt · Accepted Answer · 2012-12-02 01:22:34Z

0

Put your javascript in an external file and then in your html pages you can link to the file:

<head>    
<script src="mymenu.js" type="text/javascript"></script>
</head>

answered Dec 2, 2012 at 1:22

br3nt

9,7543 gold badges47 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to create a menu with DOM and Javascript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related