Question

I’m prototyping navigation for a site which sits on the bottom of the window. When i hover over a link a div appears above the naivigation with the sub-links, however its not position centrally above the hovered link in the navigation. I’ve tried using css to position it -50% left but that has had much of an effect [looks like it only move 50% left of the parents size], how do I do it using jQuery?

Note: I’m also using hoverIntent.

Answer 1

Position (fixed) a 1 pixel wide container div instead, and then offset the inner element (your actual item) by half of its absolute width. This trick has worked for me.

HTML:

  <style type="text/css">
    #testnav-container {
      position:fixed;
      bottom:0;
      left:50%;
      width:1px;
      border:1px solid red;
      text-align:center;
    }
    #testnav {
      height:20px;
      width:100px;
      background:blue;
      margin-left:-50px;
    }
  </style>
  <div id="testnav-container">
    <div id="testnav">test navigation bar</div>
  </div>

The 1px border on the container div is just to show you where’s at. Try it out and tell me how it goes.

Snippet jQuery example to run in console:

var foo = $('<div style="position:fixed;bottom:0;left:50%;width:1px;border:1px solid red;text-align:center;"><div style="height:20px;width:100px;background:blue;margin-left:-50px">test navigation bar</div></div>').appendTo('body');