Hover Sidebar

What Is This About?

If you were using the web in 1995 you probably saw some slide in sidebars using javascript, well today you can create a very similar sidebar using just Cascading Style Sheets and no javascript. To see it place your mouse over the blue bar on the side to see the navigation menu.

I am Not Seeing It.

It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks (<a>).

So How Is It Done?

In the stylesheet, the sidebar is positioned fixed to the side so that it will stay in the same place on the screen for the viewer. By default the items (body #sidebar ul) do not displayed (display: none;); but when you place your mouse over the sidebar the :hover that is on the sidebar (body #sidebar:hover ul) take over and displays the items (display: block;). Add a little extra styling and you got yourself a hover sidebar.

Return to CSS Play.

© 2003 Seamus P. H. Leahy
You may take and improve upon this.