Subscribe to SIM's Free Monthly
"INSIDER REPORT"  
Newsletter  
Free business startup tools and services Free Stuff
Newbie internet marketing guide Newbie Guide
marketing tips for new business startups Marketing Tips
internet marketing products with reseller rights. Our Products
Startup Internet Marketing business services Our Services

WEEKLY TIPS
 - Marketing
 - Business/Sales
 - Website Design
 - Site Development

Unique Product and Services in Northern Ontario Uniquely Northern
Link to the Startup Internet Marketing website Add URL
about Startup Internet Marketing About Us
Startup Internet Marketing Home


Startup Internet Marketing information products


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. 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 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.


Copyright 2004 by William Bontrager - All rights reserved

About the Author:
William Bontrager, Programmer and Publisher
"Screaming Hot CGI" programs
"WillMaster Possibilities" ezine
http://startupinternetmarketing.com/wm


Site Navigation Guide
Site updated daily


Free Insider Report
Receive free monthly marketing updates, tools, tips and strategies to help your online business succeed. Get immediate access to our bonus ebooks AND 150+ back issues.

Keep Informed with our Free Monthly "Insider Report"

Name: 
Email: 
           



To Top
TOP

Startup Internet Marketing Resource Center Links
Home | Tools | eBooks | Email Tips | Search Tips | Services | Marketing | eCommerce | Classifieds | Newsletters | Resources | Website Promotion | Archives | Associates | Unique | Privacy | Contact

PRODUCT OF THE WEEK
The Healthy Back Institute
Get Lasting Relief From Back Pain, Neck Pain and Sciatica…




Copyright © 2000-2009 by Startup Internet Marketing Services* All rights reserved
104 Main Street.  Kirkland Lake,  ON,  CA  P2N 3E8  705.567.5850
This site is powered by Host4Profit.net