Front page Thoughts page

A fixed location CSS only menu

In theory using CSS to generate a menu that remains stationary as the page scrolls is trivial. You apply the CSS command position: fixed; to the text and it should stay in the same place as the page scrolls. Unfortunately, most of the people out there are using web browsers with broken CSS support; in particular, Internet Explorer 5 and 6 don't implement fixed positioning correctly.
It is however still possible to implement this sort of menu without resorting to javascript or ignoring the bulk of the users out there. After much poking around on half a dozen different CSS tutorials I managed to get the menu I wanted to work, it does what I want and looks (almost) identical on all of the main browsers.
The problem I found was that all of the tutorials and examples on how to do something like this combined the required structure with the formatting that they used to beautify the menu with no clear indications of which was which. If you know CSS well or just want their exact style this is fine. If, like me, you aren't very familiar with CSS but wanted to change the style then half of the struggle is working out which bits were needed and which are there to make it look nice. Hence this page; this is the bare minimum required to get a fixed location menu to work, the bits not strictly required but recommended as a bare minimum of formatting are indicated.


body {
height:100%; /*set the page body to use the full height of the window (only needed for IE)*/
margin: 0; /*set the page body margins to zero (only needed for IE)*/

page_body {
margin-top: 5px; /*Set the margins for our main text (this whole section is optional)*/
margin-bottom: 5px;
margin-left: 1em;
margin-right: 1em;

.fixed_menu {
position: fixed; /*set the position type for non IE systems*/
top: 15em; /*set the top of the menu to be ~15 lines down the screen. You need to specify the location in some way, I'm putting it in the top right.*/
right: 1em; /*set the right hand edge of the menu to be slightly in from the edge*/
width: auto; /*the menu is as wide as it needs to be for the text we put in it*/
text-align: right; /*optional : align the text to the right hand edge (I think this looks better since the menu is on the right)*/
margin: 1px; /*optional : I just find a small margin makes things look a bit better*/

.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/

* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/

In the web page

<link href='menu.css' rel='stylesheet' type='text/css' /><!-- load the css file -->
<!-- For IE 6 or earlier hide the Y scroll bar for the bits indicated by "* html" in the css -->
<!--[if lte IE 6]>
<style type="text/css">
html {overflow-x:auto; overflow-y:hidden;}
body {overflow-y:auto;}
<!-- insert rest of head section -->

<div class="fixed_menu">
<a href="[link1]">Link text</a>
<a href="[link2]">Link text</a>
<div class='page_body'>
<!-- insert rest of page body here-->

Notes & warnings

This page is using the sample code copied and pasted from this page however since my default styles are still applied to the text and links your exact results may look a little different.
I have made no attempt to prevent the menu and the main text from overlapping on this page. On any normal page you would want to prevent this by limiting the width of the main text.
Due to the way this all works under IE the locations of where things are on the page is calculated before the vertical scroll bar is added. This gives rise to a few odd effects:
  1. The minimum right hand offset for the menu is the width of a scroll bar, any less and the end of the text will overlap the scroll bar, a very weird effect.
  2. Any right margin applied to the page body will cause the scroll bar to be inset from the edge of the window. Margins on text are fine, just not the page body.
  3. Any top or bottom margins on the page body will cause the length of the scroll bar to be wrong and the last line or so of text will not be visible
An example of this menu with a little extra formating and more care to avoid overlaps can be seen by selecting the thoughts page from the sample menu.
xhtml css css2