Floating Menu

This page contains code for a CSS floating menu bar.

Also known as "fixed menus" and "hovering menus", floating menus stay in a fixed position when you scroll the page. They appear to "float" on top of the page as you scroll.

Example of a Floating Menu

The menu to the left is an example of a floating menu. As you scroll down this page, you will notice the menu stays fixed in the same position on the screen (assuming your browser/user agent supports this feature).

Create A Floating Menu

It is actually very easy to create a floating menu bar. The operative code isposition:fixed.

Having said this, you may have to play around a bit with the placement of your menu so that it doesn't get in the way of anything that it shouldn't.

Example Code

Here is the CSS code that was used to create the floating menu to the side:

===========================================================



<style>
div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>
<div class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://www.quackit.com/css/">CSS</a>
<a href="http://www.quackit.com/html/">HTML</a>
<a href="http://www.quackit.com/javascript/">JavaScript</a>
<a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
<a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
</div>