Search code examples
csslayoutmenufixed

"Pinned-down" menu with flexible horizontal position

I am trying to make a pinned down style menu like this:

http://www.w3.org/Style/Examples/007/menus

Except I want the horizontal positioning to be more flexible.

I know that I can do that having a percentage value in "right:" instead of a constant, but i want the menu to fit snugly in a centered blog layout as the sidebar, which means when the page is resized, the sidebar shouldn't cover the content. Similarly, the box shouldn't spread away from the content if i make the page bigger.

Any way to do this with only css? If not, perhaps an easy javascript solution?

Solution

  • Here's one way to do this with some generic code:

    HTML:

    <div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

    CSS:

    Set an explicit width on the container and the content, leaving room for the sidebar in the container. Horizontally center the container.

    #container {
  width: 200px;
  margin: 0 auto;
}

#content {
  width: 150px;
}

    Now we're going to position: fix the sidebar relative to the center of the page instead of relative to the right edge of the page. Make it the width of the left over space in the container and give it a margin-left (or padding-left, depending on other things you may want to do with it) equal to the width of the content. Then set right: 50% (for a right sidebar, switch these values to left for left sidebar) and margin-right to negative one half the container width:

    #sidebar {
  width: 50px;
  margin-left: 150px;
  position: fixed;
  right: 50%;
  margin-right: -100px;
  /* other styles such as "top", etc. */
}

    Resize the window and it stays snug to the content and vertically positioned wherever you place it.

    Here's a fiddle (with some extra styles for visual clarity): http://jsfiddle.net/blineberry/UkEkS/