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

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>

Feel free to change the width, color, and other properties as you wish (as long as you don't remove position:fixed).
As mentioned, you may also need to play around with the placement of your fixed menu. You can remove/change the z-index:100 if you don't want the menu to float on top of everything.

Older Browsers

Note that this code may not work in older browsers. This is because some older browsers don't support position:fixed. If the above example doesn't work for you, this could be the reason. In that case, try using a newer browser.

CSS Floating Menu from Quackit.com