Building a Dynamic Menu with CSS and Javascript, concluded - The Style Object
(Page 3 of 4 )
The style object is a proprietary object introduced in Internet Explorer 4.0 and can be used to retrieve any in-line styles applied to an element object by using the " style" attribute. However it doesn't retrieve any styling set in embedded or externally linked style sheets. Also, it’s possible to dynamically assign style properties to any page element. This last ability is what I’m using here to style the menu buttons. In fact, the object’s extreme popularity made it widely available for most of 6th generation browsers onward. So, users still using old browsers won’t be able to see anything referencing this object. The section that styles the button <div> element is the following:
// 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';
Now, with that familiar feeling about the style object, it should be clear enough how the class applies styles to either the button containing <div> and the link itself. For the button element, I’ve decided to specify a background color and a solid border; as well as padding values and text align properties. As you can appreciate, it’s not very different from styling with regular CSS rules.
In order to display the link in a different way from the others, the class checks out if the link value passed as a parameter matches the current page location. If this is true, the corresponding button is displayed with an orange background color, this way highlighting it from the rest. The process to simply resolve the current page location and accordingly highlight the proper button is done with the lines listed below:
// resolve active page and display button differently
loc.indexOf(url)!=-1?button.style.backgroundColor=
'#fc0':button.style.backgroundColor='#9cf';
Now, it’s time to give a style the <a> element, and assign the "href" and "title" properties to it:
// 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;
For achieving a similar effect to the "hover" state in links, the class assigns different colors for the link text by calling different functions for the "onmouseover" and "onmouseout" event handlers respectively. As you can see, this is done with the following code:
// change link color on mouseover
lnk.onmouseover=function(){
this.style.color='#fff';
}
// reset link color on mouseout
lnk.onmouseout=function(){
this.style.color='#000';
}
The final task to be performed by the class is to add the text to be displayed in the link and insert this element inside the button container, finally returning the button object itself. If you think about it, this is extremely handy, since the constructor returns a completely styled and functional button, ready to be appended as an element of the general menu. That looks pretty good for adding any number of different buttons. Here’s where the class shows up its real power.
Well, at this point I guess you’re feeling like everything in the world is an object to be programmed (perhaps including wives and girlfriends). But please, let’s not get our noses into weird affairs and come back to the dynamic menu. Let’s take a good look at the "Menu" class.
Next: Another Class on the Road: Using the Menu Class >>
More JavaScript Articles
More By Alejandro Gervasio
/ 19 
