| |
An
Example:
Drop down menus are being used more and more in web pages to reduce the
number of pages while giving a familure navigation eleent in the process.
The code javascript code required is similar to the second version of
the mouseover script. You will
find this script to be multi-purpouse as you begin to get more familure
with the code. Start by copying the code from the first field and placing
it in between ther <Head></Head> fields.
The next bit of code is much more complicated. The elements of the code
are what is required to create, manipulate, and place activate the drop
Down Window.
The following code items are responsible for manupulating the table:
- <DIV style="left: 65px; top: 320px; width: 89px; height: 72px;
position: absolute; z-index: 1; visibility: hidden" id="exampledrop">
This peice of code positions the table for later viewing. (Remember
the table is always there, just not always visable.) The Code Breaks
down as follows:
- style=""
Defines that a style will be associated to this HTML tag, this includes
anything from text changes to absolute positioning.
- left: 65px;
Defines the placement of a the hidden layer so many pixcels from the
Left of the browser Window.
- top: 320px;
Defines the placement of a the hidden layer so many pixcels from the
Top of the browser window.
Remember: Netscape and Explorer
give different amounts of spacing between the top of the page and
the first line of text. (You may want to view it in both browsers
to identify any possible errors)
- width: 89px;
Defines the width of the hidden Layer.
- height: 72px;
Defines the height of the hidden Layer.
- position: absolute;
Defines the Layer as absolute allowing positioning to occur.
- z-index: 1;
Uses the z axis to alow layer on top of another layer. The largest
number is the top layer.
- visibility: hidden
This hides the layer initialy. This state will be changed in the script.
- id="exampledrop"
Gives the Layer a name to allow the script to understand what layer
it needs to change.
- MM_showHideLayers('exampledrop','','show')
Makes the table Viewable.
- MM_showHideLayers('exampledrop','','hide')
Places the Table Back into the Hidden State.
With the hiden table created we need a to activate the code to view the
table. The code below is an example of such code:
In this code the a graphic is being placed on the page to activate the
initial call for the table.
See an example.
Remember:
The reason there is both a MM_showHideLayers('exampledrop','','show')
and a MM_showHideLayers('exampledrop','','hide'), is to allow the user
the ability to turn of the menubar when mousing off the table in any direction.
That is why it is important that no space is placed between the activating
graphics, if space where added the menu might dissapear prematurly.
|
