View Full Version : Chrome Menu - difficulties with drop down menu position

09-24-2008, 10:16 AM
1) Script Title: Chrome Menu - difficulties with drop down menu position

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

3) Describe problem:

Hello, I have adjusted the chrome menu and I have tried it out,
but the position of the drop down menu is not underneath the main button (please see example http://www.karinleitner.com/indexmagic2.htm )
Can someone help me please? I have been trying to work it out for hours now....

09-24-2008, 10:39 AM
Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv" style="width:150px;">
<a href="indexclassic.htm">Classical Music</a>
<a href="indexmagic.htm">Magical Music</a></div>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width:150px;">
<a href="Repertoire.htm">Repertoire</a>
<a href="Castle Concerts.htm">Venues</a>
<a href="Workshops.htm">Workshops</a>

<a href="Charity.htm">Charity</a>
<a href="Sponsors.htm">Sponsors</a>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width:150px;">
<a href="tours08.htm">2008</a>
<a href="tours09">2009</a></div>

<script type="text/javascript">


BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

09-24-2008, 10:46 AM
Hello! Thank you very much! It is working now...

And thank you for telling me about the copyright thing, I had your link in the .js file...do I have to put it into the css file aswell?

09-24-2008, 10:49 AM
Not the .css file, just between the SCRIPT tags as seen on the demo page's source: http://www.dynamicdrive.com/dynamicindex1/chrome/demo.htm :)

09-24-2008, 03:58 PM
Hello again,

Firefox shows it no problem, but ie6 has a major problem with displaying it...here the link, but please try with ie6!

It must be my fault, cause on the website it says that it is compatible ie5+... but where is the mistake??


09-25-2008, 12:01 AM
Are we still talking about this page: http://www.karinleitner.com/indexmagic2.htm ? In IE6, I'm getting a few broken images, but the menu seems to be working fine.

01-13-2011, 04:46 PM
Anyone get this Chrome Drop Dowm Menu system to work within a div container. The website I am revamping is within a container to center it on the page, but the menu drop downs show up offset too far below and to the right of where they should. I am trying to change the code to reference the bottom and left values of the drop down button the <li> (I think asscmenuitem) rather than the top left of the web page itself, but my javascript and understanding of DOM is weak as I haven't done it in quite some time.

Here is the section of code in the Dropit function. if anyone could help I would be most appreciative as well as many others who want to use this menu system in a div container. I'll also include the link to all the code at the bottom.



dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.hidemenu() //hide menu
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function


Jimmy Bergmark
06-18-2011, 02:30 PM
I too wonder if there is a way to solve usage within DIV.
I have an old version that is working but trying to use the latest fail.
Used at http://www.jtbworld.com