Building a Dynamic Menu with CSS and Javascript, concluded

The Dynamic Menu

Before diving into brand new material, it’s necessary to step back for a moment and refresh our memory of the first article. Let’s look back and reorder our ideas befor making our way trough the final chapter of this story.

In the first article we’ve built up a dynamic navigation menu with the capability to detect the page the user is visiting and display the corresponding menu link in a different way from the other menu elements. This makes it clear for the visitor to tell what section of the site is currently active. As you can see, the logic behind the menu is very simple and certainly not something that is going to change your life forever.

However, during the menu construction process, I’ve presented a pretty refreshing way to face the problem and briefly introduced you to the always-exciting world of user-defined classes in JavaScript. Most times, web developers are working with JavaScript's built-in objects, since the language is powerful enough to tackle any development task only employing predefined objects and get the job done. Indeed, the truth is that nothing stops you from building new, custom classes in JavaScript and instantiate any number of objects belonging to them. These handy capabilities, present in mature server-side languages for years, are available to us in JavaScript too with some limitations. The good news is that we can use them in an efficient way to solve many problems related to web development.

Once I’ve briefly exposed the nice features that JavaScript offers to build new custom classes, let’s focus again our attention on the dynamic menu previously created in the first article. We’ll quickly look back at the basic building process, and finally put all of efforts to create a revamped version that encapsulates all of the necessary code in a few JavaScript classes, allowing to expand the menu capabilities with minor work from us.

Minor work? Yes, let’s admit it. Don’t ever mention this in a job interview, but we need to be a little lazy and reuse code for applications. What’s wrong with that anyway? Let’s be lazy and take a look at the menu code to be reused!

Once upon a time a dynamic menu

So far, I’ve created the dynamic menu using a few CSS declarations, four background images and just one JavaScript class, keeping the HTML markup to a minimum. As a reminder, the original source code for the menu looked like this:

function Menu(menuTexts,menuLinks){
     if(arguments.length!=2||!menuTexts.length||!menuLinks.length){return;}
     for(var i=0;i<menuTexts.length;i++){

          if(typeof(menuTexts[i])!='string'||typeof(menuLinks[i])!='string'){return;}
     }
     this.menuTexts=menuTexts;
     this.menuLinks=menuLinks;
     this.loc=location.href;  
     this.d=document.createElement('div');
     this.d.id='dynmenu';
     this.leftCorner=createLeftCorner;
     this.links=createLinks;
     this.rightCorner=createRightCorner;
     this.build=buildMenu;
     return this.build();
}
function createLeftCorner(){
     var lc=document.createElement('span');
     lc.className='leftcorner';
     lc.innerHTML='&nbsp;';
     this.d.appendChild(lc);
}
function createRightCorner(){
     var rc=document.createElement('span');
     rc.className='rightcorner';
     rc.innerHTML='&nbsp;';
     this.d.appendChild(rc);
}
function createLinks(){
     for(var i=0;i<this.menuTexts.length;i++){
          var a=document.createElement('a');
          a.appendChild(document.createTextNode(this.menuTexts[i]));
          a.href=this.menuLinks[i];
          a.title=this.menuTexts[i];
          this.loc.indexOf(a.href,0)!=-1?
            a.className='activebutton':a.className='regbutton';
          this.d.appendChild(a);
     }
}

function buildMenu(){
     this.leftCorner();
     this.links();
     this.rightCorner();
     return this.d;
}
window.onload=function(){
     if(document.body&&document.body.firstChild){
          var menuTexts=new Array('About Us','Products','Services','Links','Contact Us');
          var menuLinks=new Array('about.htm','products.htm','services.htm',
            'links.htm','contact.htm');
          var menu=new Menu(menuTexts,menuLinks);
          document.body.insertBefore(menu,document.body.firstChild);
     }
}

I’m not going to bore you listing again the complete code with CSS and markup, since it was already done in the previous article. Just remit yourself to the first part of the series to look at the rest of the code. Anyway, the "menu" JavaScript class is really easy to be understood. Let’s see briefly how it works.