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

?

1 2 3 4 5 6 7 8

<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>  <nav class="floating-menu">    <h3>Floating Menu</h3>    <a href="#">CSS</a>    <a href="#">HTML</a>    <a href="#">ColdFusion</a>    <a href="#">Database</a>  </nav>

CSS

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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