Chrome CSS menu position problem with relative positioned parent element

[mpjx]

1) Script Title: Chrome CSS Drop Down Menu (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:

Hi all, I really could use some help with this script. First, a link to the problem page:
http://jali.hostedapps.co.uk/main.cfm

The Chrome CSS Drop Down is the beige top menu "Home", "Jali Designer", "Products", etc. I modified the unordered list part of the html in order to accommodate image replacement of text links. (This works fine and I'll happily share the code if anyone's interested.)

The problem is with the positioning of the dropdowns. As you can see from the code below, the structure of the html is "main" div which is relative positioned with "auto" margins to centre the page in the browser window. "main" div contains "menu" div, which contains "leftMenu" div and "rightMenu" div. The "dropmenu" divs are below "menu", "leftMenu" and "rightMenu" but within "main".

chrome.js calculates the position to display each dropdown from the edges of the browser window. Unfortunately when the absolute positioned dropdowns are displayed, they are positioned relative to "main" div, not the browser window. This means they're offset by whatever left margin has been displayed (and which varies according to the width of the browser window). They're also offset on vertically by the top margin of "main" div.

The ideal solution would be if getposOffset:function in chrome.js could be rewritten to get the offset relative to the "main" div parent element. Has anyone done this? I saw an old post with code for the 2.01 version which claimed to do exactly this - but it doesn't work.

Any help greatfully appreciated. Thanks.

Here's the code:



<div id="main">
.
.
.
.

<div id="menu">

<div id="leftMenu">

<div id="menu-home"><a href="/main.cfm">Home</a></div>
<div id="menu-jaliDesigner"><a href="/jdSubMenu/whatIsIt.cfm" rel="dropmenu1">Jali Designer</a></div>
<div id="menu-products"><a href="/products/jaliDesignerClass.cfm" rel="dropmenu2">Products</a></div>
<div id="menu-howTo"><a href="/howto/tellmein60seconds.cfm" rel="dropmenu3">How to…</a></div>
<div id="menu-designIdeas"><a href="/designIdeas/showcase.cfm" rel="dropmenu4">Design Ideas</a></div>
<div id="menu-aboutJali"><a href="/aboutUs/about.cfm" rel="dropmenu5">About Jali</a></div>

</div><!--end of leftMenu div-->

<div id="rightMenu">


<div id="menu-myWork"><a href="/account/" rel="dropmenu6">My Work</a></div>

<div id="menu-signOut"><a href="/login/?page=3">Sign Out</a></div>


</div><!--end of rightMenu div-->
</div><!--END OF MENU DIV -->



<!--BEGINNING OF DROPT DOWN MENUS-->

<div id="dropmenu1" class="dropmenudiv">
<a href="/jdSubMenu/whatIsIt.cfm">What is the Jali Designer?</a>
<a href="/products/jaliDesignerClass.cfm">Start designing!</a>
</div>

<div id="dropmenu2" class="dropmenudiv">
<a href="/products/furniture/furniture.cfm">Furniture</a>
<a href="/products/architectural/architectural.cfm">Architectural components</a>
<a href="/products/diy/diy.cfm">DIY shapes</a>
</div>

.
.
.
.
</div><!--end of MAIN div-->

[ddadmin]

Did you manage to fix the problem? Viewing it in FF3 and IE7, the drop downs appear to be positioned correctly.

[mpjx]

Hi thanks for the reply.

I didn't alter chrome.js - my javascript skills are no where near good enough to rewrite that.

Instead I started rewriting the basic page html and css to remove the need for a relatively positioned parent element. It's a lot of work and not a very elegant solution but timescales are tight ...

If you have a solution to the original problem I'd still appreciate it as I love the script and will be using it again.

Thanks

PS What do you thing of the image replacement for the top menu? If you're interested I'll put together the relevant code (once this project is finished of course!)

[shoosrocket]

I am experiencing the very same issue. I am building an html page that centers itself according to the browser window (left and right margins are auto). The CSS Chrome drop-down menu, however, fails to position itself relative to the main menu. As you expand the page in the browser, the location of the drop-down menu changes.

Any assistance would be appreciated. Thanks.

[ddadmin]

shoorocket: Please post a link to the page on your site that contains the problematic script so we can check it out.

[shoosrocket]

ddadmin: Here's the link to the page I'm working on with the problematic script: http://bisnomulvaney.com/home-2.html. As you adjust the width of the browser window, the drop-down menu shifts as well. Please help as I'd love to use this menu for the site I'm building. Thank you.

[lymandesign]

Has anyone solved the problem of using the Chrome CSS Drop Down Menu in a centered container. It seems there are a lot of people wishing to use this menu system in a container, but no one appears to have solved it. I am having the same problem and after searching this is the closest i think anyone has gotten to solving it (http://www.dynamicdrive.com/forums/showthread.php?t=44714&highlight=Chrome+Drop+Menu+Position)

If anyone has solved it please help.

thanks

Lyman