[thelist] DHTML menus without exact positions

Andrew Clover and at doxdesk.com
Sun Jan 27 06:59:01 CST 2002


> Hello, I am trying to figure out how to get the slide-out menus from here:
> http://www.youngpup.net/?request=/components/ypSlideOutMenus.xml to work
> with my design which is NOT based on absolute positioning...so the
> coordinates will change.

I haven't played with Aaron's SlideOutMenus script, but I imagine like most
menu scripts it's entirely based around absolute positioning. There's no
real way around that - to do layering effects the elements have to be
positioned, and relative positiong is rarely useful for this sort of thing.

> Basically my design is in a centered table so there may be more or less
> empty space on the sides depending on how big the window is.

You want to put the absolutely-positioned menu elements inside a
positioned element, so that they'll appear relative to the position of
their parent. Then ensure the parent is centred on the screen. Simple
positioning example:

  <div style="width: 400px; margin: 0 auto; position: relative;">
    <div style="position: absolute; left: 0; width: 100px;">Menu 1</div>
    <div style="position: absolute; left: 100px; width: 100px;">Menu 2</div>
  </div>

Because IE5 doesn't support 'margin-left/right: auto' you may wish to add
'text-align: center' to the parent of the outer div to achieve the same
effect. (And 'text-align: left' to the outer div itself so that the text
centring doesn't inherit into the menus.)

If you need to support N4, the only way to do it is to make the outer div
absolute-positioned, and centre it manually from script by reading the
window.innerWidth property.

Don't know how this stuff might work together with the youngpup code
though.

--
Andrew Clover
mailto:and at doxdesk.com
http://and.doxdesk.com/



More information about the thelist mailing list