Click here to Skip to main content
Click here to Skip to main content

Your dynamic menu bar component in JavaScript

, 29 Jan 2007
Rate this:
Please Sign up or sign in to vote.
How to create a dynamic menu bar component in JavaScript.

Sample Image - Menu_bar_component.gif

Introduction

The comMenuBar component has been created in order to make a reusable client component that would be easily adaptable to any kind of site allowing the user to change its content by modifying a parameter file.

The parameter file has been created with the variable that is shown in the picture, but this can be easily changed, allowing an even more dynamic object. Two principal variables are described in this file named comMenuBarP.js:

  • General design variables (PARAM2 in the example)
  • Menu content variables (MENU2 in the example)
// JavaScript Document
var PARAM2 = new Array;

PARAM2['ID'] = "BAR";

PARAM2['widthbar'] = "120px";
PARAM2['heightbar'] = "355px";
PARAM2['posxbar'] = "10px";
PARAM2['posybar'] = "120px";
PARAM2['bordercolor'] = "#000000";
PARAM2['bordersize'] = "1px";

PARAM2['widthbutton'] = "120px";
PARAM2['heightbutton'] = "25px";

PARAM2['heightitemimage'] = "50px";
PARAM2['heightitemtext'] = "20px";

PARAM2['font'] = "Verdana";
PARAM2['fontsize'] = "10";
PARAM2['fontcolor'] = "#FFFFFF";

PARAM2['font2'] = "Verdana";
PARAM2['fontsize2'] = "10";
PARAM2['fontcolor2'] = "#000000";

PARAM2['bgcolor'] = "#0F70A0";
PARAM2['bgcolor2'] = "#A0D0F0";
PARAM2['bgcolorover'] = "#A0D000";
PARAM2['colorover'] = "#0000f0";

PARAM2['margin'] = "2px";

var MENU2 = [
              ["Fishes,0,close,",
                 ["Bullhead Black,1,images/bullhead_black_2b.gif,link.htm"],
                 ["SheepShead,1,images/sheepshead_2b.gif,link.htm"],
                 ["SkipJack,1,images/skipjack_2b.gif,link.htm"],
                 ["Smelt,1,images/smelt_2b.gif,link2.htm"],
                 ["Snapper Lane,1,images/snapper_lane_2b.gif,link2.htm"]
              ],
              ["Cats,0,open,link.htm",
                 ["African Golden,1,images/african_golden_2b.gif,link2.htm"],
                 ["Asian Golden,1,images/asian_golden_2b.gif,link2.htm"],
                 ["Bengal Cat,1,images/bengal_cat_2b.gif,link2.htm"],
                 ["Black-footed Cat,1,images/black-footed_cat_2b.gif,link2.htm"]
              ],
              ["Birds,0,open,link.htm",
                 ["Yellowthroat,1,images/yellowthroat_2b.gif,link2.htm"],
                 ["Wren Carolina,1,images/wren_carolina_2b.gif,link.htm"],
                 ["Whip-poor-will,1,images/whip-poor-will_2b.gif,link.htm"],
                 ["Warbler Pronothary,1,images/warbler_pronothary_2b.gif,link2.htm"],
                 ["Warbler Yellow,1,images/warbler_yellow_2b.gif,link2.htm"]
              ],
              ["Frogs,0,open,link.htm",
                 ["Bullfrog,1,images/bullfrog1_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog2_2b.gif,link.htm"],
                 ["Frog Chorus,1,images/frog_chorus_2b.gif,link.htm"],
                 ["Frog Crawfish,1,images/frog_crawfish_2b.gif,link2.htm"],
                 ["Frog Cricket,1,images/frog_cricket_southern_2b.gif,link2.htm"],
                 ["Frog Edible,1,images/frog_edible2_2b.gif,link2.htm"],
                 ["Frog Green,1,images/frog_green1_2b.gif,link2.htm"]
              ],
              ["All Animals,0,close,",
                 ["Bullhead Black,1,images/bullhead_black_2b.gif,link.htm"],
                 ["SheepShead,1,images/sheepshead_2b.gif,link.htm"],
                 ["SkipJack,1,images/skipjack_2b.gif,"],
                 ["Smelt,1,images/smelt_2b.gif,"],
                 ["Snapper Lane,1,images/snapper_lane_2b.gif,link2.htm"],
                 ["African Golden,1,images/african_golden_2b.gif,link2.htm"],
                 ["Asian Golden,1,images/asian_golden_2b.gif,link2.htm"],
                 ["Bengal Cat,1,images/bengal_cat_2b.gif,link2.htm"],
                 ["Black-footed Cat,1,images/black-footed_cat_2b.gif,link2.htm"],
                 ["Yellowthroat,1,images/yellowthroat_2b.gif,link2.htm"],
                 ["Wren Carolina,1,images/wren_carolina_2b.gif,link2.htm"],
                 ["Whip-poor-will,1,images/whip-poor-will_2b.gif,link2.htm"],
                 ["Warbler Pronothary,1,images/warbler_pronothary_2b.gif,link2.htm"],
                 ["Warbler Yellow,1,images/warbler_yellow_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog1_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog2_2b.gif,link2.htm"],
                 ["Frog Chorus,1,images/frog_chorus_2b.gif,link2.htm"],
                 ["Frog Crawfish,1,images/frog_crawfish_2b.gif,link2.htm"],
                 ["Frog Cricket,1,images/frog_cricket_southern_2b.gif,link2.htm"],
                 ["Frog Edible,1,images/frog_edible2_2b.gif,link2.htm"],
                 ["Frog Green,1,images/frog_green1_2b.gif,link2.htm"]
              ]
           ]

The drawing file has been created to build the component and to set a seried of events that would draw the menu and make it to function. The code put in the comMenuBarD.js file has been designed for IE only, and wouldn't work on another browser.

The only remaining part for the user is to call the component from his page. Two actions has to be done, as you can see in the comMenuBarx.htm file.

  • Including the files comMenuBarP.js and comMenuBarD.js
  • Calling the drawing function with the correct parameters

For more details about this component, please visit my site at http://www.webrickco.com/comMenuBarInstall.php

Drawbacks of the solution

  • Parameterization requires filling a .js file manually: my next implementation will create a short C# visual parametrizer.

History

  • 2007-01-24: First version posted.
  • 2007-01-29: Previous drawback has been corrected: it now works on Firefox and IE. It now uses standard W3 coding.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

David Domingues
Web Developer
Portugal Portugal
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140826.1 | Last Updated 29 Jan 2007
Article Copyright 2007 by David Domingues
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid