CSS Floating Menu

Creating a floating menu is very simple and quite easy. The operative code is position:fixed .

Example of a Floating Menu

The menu below an example of a floating menu. As we scroll down the page, we will notice the menu stays fixed in the same position on the page.

HTML

 
Scroll down and watch the menu remain fixed in the same position, as though it was floating.
  

    
Floating Menu
    CSS
    HTML
    ColdFusion
    Database
  

 

CSS

 
  .floating-menu {
    font-family: sans-serif;
    background: yellowgreen;
    padding: 5px;;
    width: 130px;
    z-index: 100;
    position: fixed;
    bottom: 0px;
    right: 0px;
  }

  .floating-menu a, 
  .floating-menu h3 {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
  } 

We can use the top, bottom, left, and/or right to position the menu exactly where we want it on the page.