Building a Dynamic Menu with CSS and Javascript, concluded

As its name implies, the "Menu" class will take care of building the dynamic menu, invoking (as many times as we need) the constructor for the "Button" class. This will generate the complete menu structure progressively. Since the buttons are charged with the hard work, this class is pretty simple. Let’s have a look at it:

function Menu(x,y){
     if(parseInt(x)!=x||parseInt(y)!=y){return;}
     // create menu <div>
     var menudiv=document.createElement('div');
     // create menu buttons
     var btna=new Button(x,y,80,15,'About us','about.htm');
     var btns=new Button(x+81,y,80,15,'Services','services.htm');
     var btnp=new Button(x+162,y,80,15,'Products','products.htm');
     var btnl=new Button(x+243,y,80,15,'Links','links.htm');
     var btnc=new Button(x+324,y,80,15,'Contact us','contact.htm');
     // insert menu buttons into menu container
     menudiv.appendChild(btna);
     menudiv.appendChild(btns);
     menudiv.appendChild(btnp);
     menudiv.appendChild(btnl);
     menudiv.appendChild(btnc);
     return menudiv;
}

As you can see, the class accepts only two parameters: the left and top coordinates to position the menu in the web page. Then, it creates a <div> element that will behave as the general menu container. With this object generated, all the class needs to do is create the button elements. This is easily achieved by instantiating as many new button objects, as we need for the project. In the above example class, I’ve created five buttons, assigning the proper left and top coordinates, specifying a width of 80px and a height value of 15px. Finally, I’ve assigned the texts and links for each of them.

Once the buttons have been generated, the job to be done is really a breeze. I just need to append them as child nodes to the menu containing <div>, and return the whole menu as an object. The only thing to do is instantiate a new "Menu" object, when the page is loaded and Voila! I’ve got a true dynamic menu, generated with only two simple JavaScript classes. The code might be something like this:

window.onload=function(){
     var menu=new Menu(10,10);
     if(document.body.firstChild){
          document.body.insertBefore(menu,document.body.firstChild);
     }
}

In this case, I’ve decided to position the menu at the left-top coordinates of 10px and 10px respectively, and insert it as the first element in the document structure. Obviously, it’s highly recommendable putting the source code as a separated (.js) file, and then include it in all of the pages that reference it. As usual, the full code including the two classes is listed below:

function Button(x,y,w,h,text,url){
     if(arguments.length!=6){return;}
     // create button <div>
     var button=document.createElement('div');
     // create link
     var lnk=document.createElement('a');
     // get current location
     var loc=location.href;
     // style button <div>
     button.style.position='absolute';
     button.style.left=x+'px';
     button.style.top=y+'px';
     button.style.width=w+'px';
     button.style.height=h+'px';
     button.style.padding='3px 0px 3px 0px';
     button.style.textAlign='center';
     button.style.borderColor='#000';
     button.style.borderStyle='solid';
     button.style.borderWidth='1px';
     // resolve active page and display button differently
     loc.indexOf(url)!=-1?button.style.backgroundColor=
       '#fc0':button.style.backgroundColor='#9cf';
     // style link
     lnk.style.display='block';
     lnk.style.color='#000';
     lnk.style.fontFamily='Verdana';
     lnk.style.fontSize='11px';
     lnk.style.textDecoration='none';
     // assign attributes to link
     lnk.href=url;
     lnk.title=text;
     // change link color on mouseover
     lnk.onmouseover=function(){
                this.style.color='#fff';
     }
     // reset link color on mouseout
     lnk.onmouseout=function(){
                this.style.color='#000';
     }
     // insert text link
     lnk.appendChild(document.createTextNode(text));
     // insert link into button <div>
     button.appendChild(lnk);
     return button;
}
function Menu(x,y){
     if(parseInt(x)!=x||parseInt(y)!=y){return;}
     // create menu <div>
     var menudiv=document.createElement('div');
     // create menu buttons
     var btna=new Button(x,y,80,15,'About us','about.htm');
     var btns=new Button(x+81,y,80,15,'Services','services.htm');
     var btnp=new Button(x+162,y,80,15,'Products','products.htm');
     var btnl=new Button(x+243,y,80,15,'Links','links.htm');
     var btnc=new Button(x+324,y,80,15,'Contact us','contact.htm');
     // insert menu buttons into menu container
     menudiv.appendChild(btna);
     menudiv.appendChild(btns);
     menudiv.appendChild(btnp);
     menudiv.appendChild(btnl);
     menudiv.appendChild(btnc);
     return menudiv;
}
window.onload=function(){
     var menu=new Menu(10,10);
     if(document.body.firstChild){
          document.body.insertBefore(menu,document.body.firstChild);
     }
}

Don’t you feel happy? The menu is really dynamic in a strict sense, because it’s not only capable of indicating the active link, but it’s been generated on the fly, using the native object-oriented capabilities of JavaScript. Just take a deep breath, relax, and enjoy the rest of the article.

Wrapping up

Over this two-part series, we have progressively created a dynamic menu that detects the active page and displays the corresponding link differently, visually indicating to the user what page is being visited. This real-world application is truly very handy to introduce us into the exciting arena of user-defined objects in JavaScript. Hopefully, this will be an open door to encourage web developers to take advantage of these powerful capabilities, often hidden from other common language features. Harnessing the power of object oriented JavaScript is something to be considered in any web projects where code reusability is a big time saver.