Home arrow JavaScript arrow Page 3 - Building a Dynamic Menu with CSS and JavaScript, part 1
JAVASCRIPT

Building a Dynamic Menu with CSS and JavaScript, part 1


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 first in a series, we will cover the construction process of a dynamic menu, extensively using the DOM methods within user-defined JavaScript objects to help us learn how to build more complex structures.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 72
June 22, 2005
TABLE OF CONTENTS:
  1. · Building a Dynamic Menu with CSS and JavaScript, part 1
  2. · Coding the menu: CSS and HTML into action
  3. · The dynamic factor
  4. · The "menu" JavaScript object

print this article
SEARCH DEVARTICLES

Building a Dynamic Menu with CSS and JavaScript, part 1 - The dynamic factor
(Page 3 of 4 )

  

As I stated at the beginning of this article, the objective is to build a dynamic menu that identifies the active page, and highlights the corresponding link, visually indicating to the user what page he/she is currently visiting. To do that, Iíll use the above static menu as the base structure, adding the dynamic capabilities with JavaScript.

Whatís more, since the menu might be quickly implemented in several Web projects, Iím going to encapsulate the whole code as a new JavaScript object, sacrificing a bit more of computing client resources, but gaining in maintenance and reusability. Sounds good, right? Letís get a little more dynamic and build up the menu. 

First, letís see the full code for the CSS rules, which strongly relies on the previous static example. The listing is the following: 

<style type="text/css">

a.regbutton:link,a.regbutton:visited {

    float: left;

    display: block;

    font: normal 11px "Verdana", Arial, Helvetica, sans-serif;

    color: #000;

    text-align: center;

    text-decoration: none;

    background: #fff url("bg.gif") repeat-x center left;

    width: 80px;

    padding: 10px 0px 9px 10px;

}

a.regbutton:hover {

    float: left;

    display: block;

    font: normal 11px "Verdana", Arial, Helvetica, sans-serif;

    color: #fff;

    text-align: center;

    text-decoration: none;

    background: #fff url("bg.gif") repeat-x center left;

    width: 80px;

    padding: 10px 0px 9px 10px;

}

a.activebutton:link,a.activebutton:visited {

    float: left;

    display: block;

    font: normal 11px "Verdana", Arial, Helvetica, sans-serif;

    color: #000;

    text-align: center;

    text-decoration: none;

    background: #fff url("bgact.gif") repeat-x center left;

    width: 80px;

    padding: 10px 0px 9px 10px;

}

a.activebutton:hover {

    float: left;

    display: block;

    font: normal 11px "Verdana", Arial, Helvetica, sans-serif;

    color: #fff;

    text-align: center;

    text-decoration: none;

    background: #fff url("bgact.gif") repeat-x center left;

    width: 80px;

    padding: 10px 0px 9px 10px;

}

.leftcorner {

    float: left;

    background: #fff url("lc.gif") no-repeat center center;

    width: 10px;

    padding-top: 8px;

    padding-bottom: 5px;

}

.rightcorner {

    float: left;

    background: #fff url("rc.gif") no-repeat center center;

    width: 10px;

    padding-top: 8px;

    padding-bottom: 5px;

}

#dynmenu {

    padding: 0px;

}

h1 {

    clear: left;

}

</style>

If you take a look at the above CSS rules, youíll probably realize that they're pretty similar to those used with the first example. As you can appreciate, Iíve kept the original "regbutton", "leftcorner" and "rightcorner" classes, to give the same look to the menu. The only significant difference resides in the additional "activebutton" pseudo class, which is defined to be applied to the link corresponding to the active page, displaying it differently from the other links.

In order to highlight the active button, Iíve used the "bgact.gif" background image that is similarly tiled horizontally, changing the original button color to an orange version. In this way it indicates that the link corresponds to the active page. As usual, feel free to pick up any background image that you think is convenient for achieving the visual effect. Itís also perfectly possible to get rid of all of the images and vary only background and font colors. Just grasp that inspirational moment and choose the best model for your personal preferences. 

Finally, Iíve styled a <h1> header tag, for clearing any element rendered after the menu itself. This is only to be used in the example. If youíre going to use the menu in your own applications, just add the styles that you really need. 

At this point, I think that the CSS styles have been easily established to give you a good understanding. Now, letís take a deep breath and remember the concept proposed before: building a dynamic menu that is completely defined as a new JavaScript object. What are we waiting for? Letís make JavaScript work for us! 


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