Home arrow JavaScript arrow Page 3 - 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 / 23
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

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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