Getting Started with the Floating Menu Bar
The Floating Menu Bar transforms your site’s navigation from a static list into a dynamic, movable control panel. Think of it as a remote‑control window that pops up anywhere on the screen and lets visitors click a link to load the desired page in the main browser window. Because the bar floats, it stays in view even when users scroll, making it easy to jump back to other sections without losing context.
Before you begin customizing, download the full demo set from http://willmaster.com/possibilities/demo/floaterpage1.html. This bundle contains six essential files: the floating menu itself, a set of five example main pages, and the supporting JavaScript code. Having all six files locally lets you experiment in real time and see how changes to the menu affect page navigation.
The central file is floatingmenu.html. Open it in a plain‑text editor or an HTML editor that preserves the file’s structure. Inside the document, you’ll find a <body> tag on line 22 that holds four event handlers - onLoad, onResize, onBlur, and onFocus - each designed to keep the bar responsive across different browsers. These handlers call JavaScript functions that manage the bar’s visibility and z‑order, ensuring it appears above other windows when needed.
Lines 25 to 29 contain the actual menu items and their corresponding links. Each line follows this pattern: <a href="page.html" target="mainpage">Page Title</a>. The href points to the file that will load in the main frame, while the target value must match the name assigned to the main page frame in every mainpage*.html file. Keep that name consistent; it’s the glue that ties the floating bar to the content area.
The Custom design options are unlimited. If you want to replace plain text links with icons, simply swap the text between the The Once you’ve reviewed the structure and behavior, save the file and open After mastering the floating bar’s core mechanics, you’ll likely want to tailor its look and feel. Begin by editing the five example main page files (e.g., The first adjustment you’ll make is on line 8 of each main page. Replace the placeholder Next, on line 11 you’ll set the bar’s dimensions. The code looks like Line 13 assigns a name to the main page frame. This value must match the The Lines 24 to 27 provide a link that users can click to launch the floating menu bar manually. You can move this link to any location you like or replace it with a graphic. If you prefer a more subtle trigger, wrap the link in a small From line 29 to 35, the code inside body tag also defines two attributes - bgcolor and text - that set the bar’s background and link colors. Feel free to change these values to match your site’s palette. If you prefer a darker bar, set bgcolor="#333" and text="#fff"; for a light theme, try bgcolor="#eee" and text="#000"
<a> tags for image tags. To make the bar vertical instead of horizontal, adjust the width and height values in the CSS or inline styles that define its dimensions. The JavaScript functions that drive the bar - okaytoblur(), keepfocus(), and focuscop() - operate on a single global variable called KeepFocus. When KeepFocus is true, the bar stays on top; when false, it can be obscured by other windows.okaytoblur() function sets KeepFocus to false and calls window.blur(), allowing other windows to come to the front. It runs when the “Let Me Hide” button is pressed. The keepfocus() function, on the other hand, sets KeepFocus to true and brings the bar to the front. It fires on page load and when the “Keep Me Top” button is clicked. Finally, focuscop() checks the value of KeepFocus every second; if the bar has moved behind another window, the function brings it back up. This loop guarantees that the bar never gets lost behind unrelated content.floatingmenu.html in a browser that supports JavaScript. Move the bar around, resize it, and click the control buttons to see how the state changes. If the bar disappears or hides, click a menu link again; the bar will reappear automatically, thanks to the event handlers you just examined.Customizing the Menu Bar and Main Pages
floaterpage1.html through floaterpage5.html). Each page shares a common template, so copy one and rename it to represent the new page you’re adding. Keep the first 38 lines and the last two lines; everything else can be replaced with content specific to that page.floatingmenu.html with the relative or absolute path to your floating bar file. If your bar sits in a subdirectory called menu, the link becomes href="menu/floatingmenu.html". If you prefer an absolute URL, prefix it with http:// and the domain name.width="200" height="50". Increase the width if you want larger icons or text, and adjust the height if you’re using a vertical layout. The values must be numeric and reflect the CSS or inline style that the bar uses.target attribute used in every link inside the floating menu. For example, if the menu uses target="mainpage", then every main page file should contain name="mainpage" in this line. Consistency here ensures that clicking a menu item loads the correct page into the main area.body tag on line 18 carries a single event handler: onload="focuscop();". This line guarantees that, even if a user’s browser starts with another window on top, the main page will bring the floating bar to the front when a link is clicked. Without it, the bar could remain obscured behind the newly loaded page.<div> and style it with CSS. Keep the text readable; for instance, “Open Menu” works well across devices.<noscript> tags appears only when JavaScript is disabled. This fallback displays the menu links as regular navigation links, ensuring accessibility for all users. To test the noscript section, temporarily change the opening tag to <nosXcript> and reload the page; the script will be ignored, and you’ll see the fallback links.
No comments yet. Be the first to comment!