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.
Next: The Style Object >>
More JavaScript Articles
More By Alejandro Gervasio
/ 19 
