Display Floating Navigational Menus within Your Web
Page
By
William
Bontrager
Your entire site can be navigated
from a Floating Menu Bar.
It is a popup window and it works like a remote control. Clicking on a menu
item displays the appropriate page in the main browser window.
Your visitors have control of the Floating Menu Bar.
They can move it. They can resize it. They can click buttons to make it always
be on top, to let it hide, and to close it. If hidden or closed, when your
visitors click on a menu link again the Floating Menu Bar magically
reappears.
Take a look at the demonstration set (URL below). You might like the idea.
Instructions:
The essential instructions are augmented with informational paragraphs.
(FYI)
The informational paragraphs are indented from the left margin with one tab
character. Each informational paragraph set begins with "(FYI". |
Before anything else, get
the
demonstration
set. The set is a live demonstration of the Floating Menu Bar and is
also the template for the instructions in this article. Instructions about
how to pick up the demonstration set is on page 1 of the set. Make sure you
get all six files so you can test your changes as required.
The Floating Menu Bar file
Open floatingmenu.html in your ASCII/plain text word processor or HTML text
program.
The only thing you have to change in this file is lines 25 through 29. Those
lines contain the menu items and links.
The file name in the links are the file names of your main pages files.
(FYI)
The name in the target attribute is the name you assign to your main pages
(which you'll read about in the main pages instructions below). The name
must be the same for all pages and all links. It is what ties the Floating
Menu Bar to the main pages files.
Best bet: Leave the target attribute as it is. |
These links to the files
of your main pages can be complete http:// URLs or relative URLs
("floatingmenu.html" and "../floatingmenu.html" and "stuff/floatingmenu.html"
are examples of relative URLs).
(FYI
-- the body tag)
In the body tag on line 22 you'll see four different event handlers. They
are all required for possible scenarios with the different browsers.
The "onLoad" event handler tells the browser what to do when the Floating
Menu Bar is first loaded.
The "onResize" event handler tells the browser what to do if the Floating
Menu Bar is resized by your visitor.
The "onBlur" event handler tells the browser what to do if the Floating Menu
Bar is disappearing behind another window. (It can let it happen or bring
it back on top, depending on what button, if any, has been clicked.)
The "onFocus" event handler tells the browser what to do if the Floating
Menu Bar is behind other windows when it is called to action by someone clicking
its link on a main page. In such case, the Floating Menu Bar is brought up
to the top.
The color and text attributes of the body tag can be changed to suit the
design of your Floating Menu Bar.
(FYI -- custom design)
The design of the Floating Menu Bar is up to you:
(1) You can use graphics instead of text links, if you wish.
(2) The buttons can contain different words.
(3) The buttons can be replaced with text or graphic links and the form
discarded; just use href="JavaScript:_________" where the underline is the
name of a JavaScript function.
(4) The Floating Menu Bar can be a vertical shape rather than horizontal
(you'll read about specifying the size in the main pages instructions
below).
(5) You can use page background or other graphics as you please.
(FYI -- what the functions do)
The functions use one variable, KeepFocus, to track whether or not the Floating
Menu Bar needs to stay on top of all windows.
The function okaytoblur() sets the KeepFocus value to false and blurs the
Floating Menu Bar window. Blurring the window allows other windows to come
to the top. (On some systems, blurring will also make it the bottom window
-- which is okay.) This function is called when the "Let Me Hide" button
is clicked.
The function keepfocus() sets the KeepFocus value to true and brings the
Floating Menu Bar window to the top. This function is called when the Floating
Menu Bar first loads. It is also called when the "Keep Me Top" button is
clicked.
The function focuscop() checks to see whether or not the KeepFocus value
is true. If it is true, the function makes sure the Floating Menu Bar is
on top. Then, it sets itself up to check again in 1000 milliseconds (which
is 1 second). This function is called (1) when the Floating Menu Bar window
is resized, (2) when the Floating Menu Bar window blurs, such as when your
visitor clicks on a different window, and (3) it calls itself every
second. |
The main pages
files
The templates of all five of the main pages demonstration files are identical.
You can use floaterpage1.html or any of the other main pages to make one
customized template. All you need for your template is the first 38 lines
and the last 2 lines of floaterpage1.html (or other main page).
(FYI)
Once you have your template customized and working, you will use one copy
of it for each page of your website. |
Between the quotes on line
8 is the file name of the Floating Menu Bar file. The file name can be a
complete http:// URL or a relative URL.
Line 11 determines the size and shape of the Floating Menu Bar. Adjust the
numbers representing the height and width until it accommodates the design
of your Floating Menu Bar.
(FYI
-- main page names)
Line 13 is where your page assigns a name to itself. (Note: This is not
a reference to a file name. The name referred to here is a separate name
assigned with a JavaScript statement.) All of your main pages must have the
same name. It must be the same name you used as the target attribute in the
menu items and links of the Floating Menu Bar file (lines 25 through 29).
This name is what ties the main pages files and the Floating Menu Bar together
so they work as a team.
(FYI -- the body tag)
The event handler in the body tag of line 18 is required. It ensures the
main page becomes visible when its link is clicked in the Floating Menu Bar,
whether or not the main page is already loaded but just behind some other
windows.
The color and text attributes can be changed to suit the design of your
site. |
Lines 24 through 27 is the
link that launches the Floating Menu Bar. You may reposition the link and/or
use a graphic instead of text. The design is up to you.
(FYI)
The code between the <script> and </script> tags will be effective
only if the visitor's browser is JavaScript enabled. |
Lines 29 through 35 is the
code your visitor will see if their browser is *not* JavaScript enabled.
This code is optional. For most sites, though, it is a good idea to include
it. Again, the design is up to you.
(FYI)
The code between the <noscript> and </noscript> tags will be
effective only if the visitor's browser is *not* JavaScript enabled. In that
case, there will be no Floating Menu Bar and the links act just like regular
web pages.
You can test the "noscript" code even if your browser is JavaScript enabled.
Just put an X (temporarily, of course) into the tag, like
<nosXcript>, and the browser won't do anything special with the code
because it doesn't recognize the tag. |
If you want visitors with
JavaScript enabled browsers to have the option of using either the Floating
Menu Bar or the regular navigation links, remove the tag on line 29 and the
tag on line 35, the "noscript" tags.
Now, test the template with the Floating Menu Bar.
When it works okay, use the template for each of your main pages.
I hope you can have fun playing with the Floating Menu Bar. It is a nice
touch for some sites.
Happy menu-ing.
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
