Simple Floating Menu

A floating menu on the left side of a web page can make its links readily available all the time, wherever the page is scrolled to.

When not needed, the menu retracts to be out of the way. Tap the narrow retracted menu and it expands to spelled-out links (or icons, if you use icons instead of text).

An example is on the left edge of this page.

Tap it and it expands. Tap it again and it retracts.

Here is the source code used by the example. Other than updating the menu items to your own, the items that should have your attention have colorized or bolded text. Notes follow the source code.

<div id="FLOATING-MENU-CONTAINER" 
style="position:fixed; 
   top:2in; left:0;
   color:white; 
   width:25px; 
   height:190px; 
   background-color:hsl(208, 70%, 52%); 
   border-top-right-radius:20px;
   border-bottom-right-radius:20px;"
onclick="OpenCloseFloatingMenu()">

<div id="float-menu-icon-container" 
style="position:absolute; display:block; 
   right:5px; top:81px; 
   font-size:25px; color:white; 
   cursor:pointer;">
&#8801;
</div><!-- id="float-menu-icon-container" -->

<div id="float-menu-text-container" style="display:none; margin:.2em; font-size:1rem; font-weight:bold; padding-top:.25em;">
<div style="margin:.75em .5em;"><a href="https://www.willmaster.com/"><span style="color:white;">Home</span></a></div>
<div style="margin:.75em .5em;"><a href="https://www.willmaster.com/software/"><span style="color:white;">Software</span></a></div>
<div style="margin:.75em .5em;"><a href="https://www.willmaster.com/library/"><span style="color:white;">Library</span></a></div>
<div style="margin:.75em .5em;"><a href="https://www.willmaster.com/blog/"><span style="color:white;">Blog</span></a></div>
<div style="margin:.75em .5em;"><a href="https://www.willmaster.com/software/information/AlternativePaymentMethods.php"><span style="color:white;">Payments</span></a></div>
</div><!-- id="float-menu-text-container" -->

</div><!-- id="FLOATING-MENU-CONTAINER" -->

<script type="text/javascript">
function OpenCloseFloatingMenu()
{
   if( document.getElementById("float-menu-text-container").style.display=="none" )
   {
      document.getElementById("FLOATING-MENU-CONTAINER").style.width="initial";
      document.getElementById("float-menu-icon-container").style.display="none";
      document.getElementById("float-menu-text-container").style.display="block";
   }
   else
   {
      document.getElementById("FLOATING-MENU-CONTAINER").style.width="25px";
      document.getElementById("float-menu-icon-container").style.display="block";
      document.getElementById("float-menu-text-container").style.display="none";
   }
} // function OpenCloseFloatingMenu()
</script>

Notes —

Important: The above floating menu source code needs to be located in your web page source code below any visible content that the page publishes. If any visible content is below the floating menu source code, the content might publish on top of the menu instead of the menu on top of the content.

The HTML part is within the id="FLOATING-MENU-CONTAINER" div.

Within the id="FLOATING-MENU-CONTAINER" div is the id="float-menu-icon-container" div. It displays an HTML character that is shaped like a burger menu icon. The ≡ ("≡") character is used in the example. An alternative that may be used, a charcter that is a bit wider, is the ☰ ("☰") character

Also within the id="FLOATING-MENU-CONTAINER" div is the id="float-menu-text-container" div. It holds the menu item links.

Below the HTML section of the source code is the JavaScript.

The CSS and content of those divs may be changed to your liking. There are a few items you'll want to pay special attention to, even if the rest are left as they are.

1. You'll want to change the menu links to links of your own. They're found in the id="float-menu-text-container" div. The links may be text or icons or a combination of both.

2. The item 25px is found in two places, in the CSS of the id="FLOATING-MENU-CONTAINER" div and also in the JavaScript code. It specifies the width of the menu container when it is retracted. If the number is changed, both places need to be changed.

3. The item height:190px;, found in theid="FLOATING-MENU-CONTAINER" div, specifies the height of the menu container. It may need to be changed depending on the number of menu items and their spacing.

4. The item top:81px;, found in the CSS of the id="float-menu-icon-container" div, specifies how far from the top that the burger menu icon shall be placed. The position may need to be changed if the height of the menu container changes.

The menu code is perfect for tweaking to make it right for you. Adjusting CSS code can be a fun exercise.

The floating menu is out of the way while retracted. And, it is readily available to expand with text or icon links. Then, just tap it.

(This content first appeared in Possibilities newsletter.)

Will Bontrager