Home arrow JavaScript arrow Page 2 - 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 - Adventures with the Menu Class and Button Class
(Page 2 of 4 )

Javascript Menu Class

The class constructor accepts two parameters: "menuTexts" and "menuLinks." They are two array structures containing the texts to be displayed in the menu and the corresponding links associated with each button. Then, the class divides the construction process in three main logical sections, declaring the methods to generate the menuís left corner, the links section and the right corner, in sequence. According to this, the "createLeftCorner()","createLinks()" and "createRightCorner()" methods are called properly within "buildMenu()" to generate the complete dynamic menu. Please note that the "createLinks()" method takes care of determining the current page location and display the corresponding active link different from the others.

Once the page is loaded, the last steps consist of instantiating a new object of the class ďmenuĒ and pass the correct parameters to the constructor to generate the menu, which is inserted at the top of the document structure. Again, this might be easily changed choosing an alternative insertion point.

As you can see, the classí logic is not so complicated. Since Iím using DOM methods and properties that are generally well supported in todayís browsers, the menu will work in most cases. But, as with anything regarding client-side programming, make sure it works for your targeted visitors.

Well, the original dynamic menu is set up to be implemented in any web project, but as I suggested previously, Iíd like to go further beyond with JavaScript classes and define a new prototype, more expansible in terms of capabilities and completely self-contained. Whatís more, since the whole code will be encapsulated in one class, Iím going to get rid of any external CSS code, applying the necessary styles inside the class. Hey, donít be afraid, I still will be using a <body> tag! But now that Iím thinking of itÖI may give a try removing it. No, definitively itís a bad idea. Ok, letís get back and be conscious. Itís time to show the JavaScript class and put it to work for us.

Coding with class in JavaScript: the "button" class

Certainly, the new JavaScript class is pretty skeletal in its structure. Since the menu really is composed of several buttons, I consider defining firstly a generic "Button" class that will generate the menu buttons including styles and other goodies, and then define a "Menu" class that will make the necessary calls to the button constructors, for generate the complete menu structure. But, letís not waste more time in explanations and look at the source code of the classes. In first place the "Button" class, which is defined in the following manner:

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;
}

Donít feel intimidate about the first class because its logic is very easy to grasp. As you can see, the constructor accepts six parameters, which are described below:

  • x: specifies the left position for the button element.
  • y: specifies the top position for the button element.
  • w: specifies the width of the button element.
  • h: specifies the height of the button element.
  • text: specifies the text to be displayed in the button element.
  • url: specifies the link assigned to the button element.

Without a doubt, the function for each one of the parameters is very logical and intuitive, and certainly gives us a clear clue about the internal tasks performed by the class. Letís describe the process to generate each button.

First, the class creates in memory, a <div> element that will be the general container for the button. Then the button link is generated, creating an <a> element, which will be inserted later into the container. Next, the current page location is easily determined by using the "href" property of the "window.location" object. The tasks above-mentioned are performed with the lines:

// create button <div>
var button=document.createElement('div');
// create link
var lnk=document.createElement('a');
// get current location
var loc=location.href;

Once the button container has been generated, the class assigns respectively the x, y, w, and h parameters to the corresponding left, top, width and height style properties of the button, utilizing the "style" object, being absolutely positioned in the document. Here I think it deserves a short explanation, since Iím using it as workhorse to style elements inside the class.


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