Home arrow JavaScript arrow Page 2 - 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 - Coding the menu: CSS and HTML into action
(Page 2 of 4 )

 

Letís see the underlying code behind the sample menu. First, here are the CSS declarations: 

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

}

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

}

</style>

Thatís a quite lengthy CSS listing to be analyzed. In fact, itís not complicated at all, as youíll see in a moment. Iíve just defined the classes for styling each link present in the menu, as well as the left and right corners respectively. Doing so, Iíve created the "regbutton" class, to give a button appearance to each one of the links. Please note that Iíve specified the tiny "bg.gif" background image to be horizontally tiled across the button itself, achieving the consistent look.

Then, Iíve declared the "leftcorner" and "rightcorner" classes, obviously for displaying the left and right menu corners. Finally, the "dynmenu" selector is defined, for styling the main menu container within the markup. I'm sure youíll agree that all of this code is pretty self-explanatory. 

Now, itís time for the HTML markup listing: 

<div id="dynmenu">

<span class="leftcorner">&nbsp;</span>

<a href="#" class="regbutton" title="About Us">About Us</a>

<a href="#" class="regbutton" title="Products">Products</a>

<a href="#" class="regbutton" title="Services">Services</a>

<a href="#" class="regbutton" title="Links">Links</a>

<a href="#" class="regbutton" title="Contact">Contact</a>

<span class="rightcorner">&nbsp;</span>

</div>

As you can see, the above HTML is very clear. The only tricky parts correspond to the left and right corners. Iíve used the powerful and versatile <span> tag to create the corner effects, with no structural value. There are lots of different ways to achieve this kind of visual effect, using <div> elements, but Iíve decided to keep it that way for simplicity. 

Letís congratulate ourselves! With a few lines of code, we have a fully functional navigation menu that will work in most browsers. Hereís the full code for the recently developed static menu: 

<html>

<head>

<title>STATIC MENU</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

}

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

}

</style>

</head>

<body>

<div id="dynmenu">

<span class="leftcorner">&nbsp;</span>

<a href="#" class="regbutton" title="About Us">About Us</a>

<a href="#" class="regbutton" title="Products">Products</a>

<a href="#" class="regbutton" title="Services">Services</a>

<a href="#" class="regbutton" title="Links">Links</a>

<a href="#" class="regbutton" title="Contact">Contact</a>

<span class="rightcorner">&nbsp;</span>

</div>

</body>

</html>

Note that Iíve coded some dead links for the menu. This seems to be a little obvious, but if youíre going to use the example, donít forget to replace them with the corresponding URL values for your site. 

So far, so good, the menu is working and everything is fine. But did I mention the word "dynamicĒ in the above lines? Where is the dynamic menu? Keep reading. 


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