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 / 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 - 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

- 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