Floating Menu Bar
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 at
/library/demo/floaterpage1.html
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:
- You can use graphics instead of text links, if
you wish.
- The buttons can contain different words.
- 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.
- 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).
- 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
web site.
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 accomodates 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.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2000 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
