|
Back
To JavaScript Index
Layer Menu Uses
External Page
|
This menu technique is ideal for cases where you have a number of
pages on your site, and may need to frequently change the menu
items on all or many of them. Using an <iframe> within a floating layer, the
menu items are contained in a single external html page. You
insert the layer code once into each page -- and when you must
change the menu, you change a single external page... with the
changes instantly reflected in every page on your site.
There are other ways to do
this, of course. You can use server-side Perl or PHP
scripts with an "include" to bring the menu content into
your page. But this requires knowledge of scripting that
some webmasters may not possess; and, of course, if your server
(such as many freeservers) does not offer server-side scripting
capability, that more complex server-scripted approach is
unavailable to you.
The menu-in-iframe-in-layer
approach, however, offers a clean, simple-to-manage alternative
that anyone can use with nothing more than basic html
skills.
|
| .
|
See
Demo
.
|
| Have
a look at our online demonstration to get a better idea of how this works...
click
here. It will open a simple four-page website in a new
window that you can
examine. Use right-click/view-source to get a look at the
code.
|
| . |
Download
Demo
. |
| We've
also created a sample four-page website (packaged in an 8K zip file) to demonstrate the
concept.
Most webmasters will quickly understand this idea, just by
downloading and looking at the demo. Download it here:
demo download. |
| . |
|
Instructions
. |
| Insert
the code snippet shown below in each page on your site that you
wish to have show the menu. Because this is
captured in a positioned layer, it does not matter where in your
pages you place it --
anywhere between <body> and </body>. Usually,
the best place will be just before the </body> tag.
Change the
SRC= to reflect the address of the menu page that you want to
show.
Important:
Usually, best policy is to use the full http:// path
to the menu page; though relative paths can be used, too... but take
care with relative paths, as it's easy to incorrectly enter paths.
Using an absolute http:// address also means that the code for the
snippet is identical on every page.
Adjust the
size by setting *both* the WIDTH= and HEIGHT= in the <IFRAME>
and the width, height, and clip rect(...) in the <DIV>
style. Colors and borders, etc., can be adjusted in the
styles to suit your design.
If you need
the menu to scroll, set SCROLLING to YES.
Position
the layer in your page by setting the left: and top: in the STYLE.
. |
|
The
Code
. |
|
|
Click here to select the code in the window above.
Use Control-C to copy it to your system clipboard.
|
|
..
|
|
Making The
Menu Page
.
|
|
The menu page is nothing but an ordinary html page. In its
most basic form, it's just a list of links. But because it is
just an html page that is being "imported" into the iframe
in the floating layer... the good part is you can make it look
any way you want. Graphics, Flash movies, background images --
anything you want can be put in the menu page.
Important
Note:
All links in the menu page should normally include
target=_top, like this:
<a href="http://wherever"
target="_top">
and it is best, again, to use
the full http:// path in the links. In cases where
subdirectories are involved, it is, practically speaking, mandatory.
|
|
.
|
[ Return
to JavaScript Index ]
|
