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.
The essential instructions are augmented with informational paragraphs.
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.
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.
(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).
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)
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.
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.
Copyright 2004 by William Bontrager - All rights reserved