Home arrow JavaScript arrow Building a Dynamic Menu with CSS and Javascript, concluded
JAVASCRIPT

Building a Dynamic Menu with CSS and Javascript, concluded


Dynamic menus that highlight the link where a website visitor is located can make site navigation a much more pleasant experience. In this article, the second and final part of the series, we learn more about dynamic menus in JavaScript and then check out the menu class.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 31
June 29, 2005
TABLE OF CONTENTS:
  1. · Building a Dynamic Menu with CSS and Javascript, concluded
  2. · Adventures with the Menu Class and Button Class
  3. · The Style Object
  4. · Another Class on the Road: Using the Menu Class

print this article
SEARCH DEVARTICLES

Building a Dynamic Menu with CSS and Javascript, concluded
(Page 1 of 4 )

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials