The fixed bottom menu deconstructed

This page describes code and a menu system that is not currently used on this website. For an example of the menu described please see here.

Having dissected the responsive layout code, the code for the Fixed Bottom menu is documented on this page.

This is just a historical page as it no longer describes the menu you see on the page you are viewing. The "Hamburger Menu" was used on the layout you see on this page and the issue with a Device Dependent Handler is not related to the discussion on this page.

The display of menu items

The bottom menu displays as fixed at the bottom of all screens. When the screen is wide enough all the menu items are displayed. The first menu item is always displayed.

To illustrate the operation of the "expand/collapse" nature of the bottom menu I have created some new classes and a function to toggle the class of the navbar. The classes on the "production" .css are different and are called "responsive" and are instantiated by a Media Query.

Top

<script>
// the function controlling the Responsive Bottom Menu
function myFunction3() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " nonresponsive";
  } else {
    x.className = "navbar";
  }
}
</script>

I called the "production" class "responsive" "nonresponsive" and the menu will toggle from the left menu.

<style>
  .navbar.nonresponsive .icon {
    position: absolute;
    right: 0;
    bottom:0;
  }
  .navbar.nonresponsive a {
    float: none;
    display: block;
    text-align: left;
  }
</style>

The Hamburger Icon

The icon is hidden when the display is not a mobile device.

.navbar .icon {
  display: none;
}

The css media query:

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom:0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

The .icon class is positioned in an absolute manner - see links below.

CSS used for this menu

CSS Layout - Float and Clear
CSS Layout - The position Property
CSS Pseudo Class for Icon - THIS IS PROBABLY CONFUSING the icon is NOT a Psuedo Class

The fixed bottom menu deconstructed

Links