|
EXAMPLE
1) Insert the following style commands in the <HEAD> section of the page.
2) Insert this script also in the
<HEAD> section of the page.
3) Insert the following HTML code
anywhere inside the <BODY> section of the page.
4) Insert the onload event handler inside the
<BODY> tag as follows (only use this if you wish to show the submenu_1,
area_1, image_1 divs when the page loads):
<body onload="showDivs('submenu_',1);showDivs('area_',1);showDivs('image_',1)",
followed by other tags such as bgcolor, etc..
This is how the script works:
There are 4 sections in the HTML document:
1) a contents section
2) a menus section
3) a submenus section
4) an images section
Within each section there is a number of DIVs (in our case 3 DIVs for each
section) whose ID is composed by a word and a number (e.g. area_1,
area_2, topmenu_1, topmenu_2
etc.). First we defined each DIV within the <STYLE> tags. The 'visibility'
property of each one of our DIVs is set to 'hidden'
except for the main menus (we wish to show the top menus all the time).
The Javascript function showDivs(divName,divNumber) works
as follows:
The first parameter supplied to the function is divName
(the alphabetic part of the DIV we want to show - e.g. 'area_'). The second
parameter is divNumber (the number we have assigned
to the DIV - e.g. 1). The function then shows the DIV whose combination of
name and number matches with the parameter we supplied while at the same
time hiding the other DIVs.
In order to show submenu_1, area_1 and image_1 divs all we have to do is to call
the function for each DIV as follows: showDiv('submenu_',1),
showDiv('area_',1), showDiv('image_',1).
How to make it work:
For each new menu you wish to add you'll need to:
1) Add a DIV for each of the sections topmenu, submenu, contentArea,
contentImage. Please note that you do not necessarily have to add
anything inside the DIV (for example, if you just need the menu and the images
then add an empty DIV for the contentArea and submenu sections. Give each DIV an
id depending on the section (e.g. all DIVs within the topmenu section have the
id 'topmenu_' + number).
2) Give each DIV a class identifier (e.g. 'CLASS = topmenu4) and add an entry in
the stylesheet section with all the required properties for that class. Remember
to set the visibility property of the DIV to 'hidden'.
3) Increment the var divsUsed variable (just below the showDivs function) to the
number of menus you are going to show. (For example if you're planning to have 4
menus then set divsUsed = 4.
Example: Adding a new menu and modifying the
position of the layers on the page:
Step 1
Add a DIV in each section
Add a DIV in the <!-- topmenus --> section:
<DIV id = 'topmenu_4' class = 'topmenu4'>your
menu...</DIV>
Add a DIV in the <!-- submenus --> section:
<DIV id = 'submenu_4' class = 'submenu4'> your
submenu...</DIV>
Add a DIV in the <!-- contentAreas --> section:
<DIV id = 'contentArea_4' class= 'contentArea4'>your
content area.. </DIV>
Add a DIV in the <!-- contentImages --> section:
<DIV id = 'submenu_4' class = 'submenu4'> your
image</DIV>
Step 2
Add the stylesheet entries for each new DIV class within the <STYLE>
tags:
(adjust the values in bold to suit your needs)
.topmenu4 {position:absolute; width:200px;
visibility:visible; z-index:2; padding:2px;left:100px; top:466px;}
.submenu4 {position: absolute; width:50px; visibility:hidden; z-index:2;
padding:2px;left:215px; top:440px;}
.contentArea4 {position: absolute; width:330px; visibility:hidden;
z-index:1; padding:2px;height:300px;left:445px; top:341px}
.contentImage4 {position:absolute; width:330px; visibility:hidden;
z-index:1; padding:2px;left: 120px; top:450px}
Step 3
Increment the value of the variable divsUsed
to 4. Also define the redirect page for older browsers
in this section of the script:
} else {location="old_browser.htm";}
|
