Chrome CSS Drop Down Menu (v2.4) Issue...

[kris@ennis]

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

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

3) Describe problem: I cannot for the life of me, get the drop downs to drop down close to the navigational bar. For an example, view this website: http://www.printersmall.com/testsite/index2.html

Any help would be greatly appreciated. Thanks!

Kris

[ddadmin]

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">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>

<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a></div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a></div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.mapquest.com/">Mapquest</a>
<a href="http://mail.yahoo.com">Yahoo Mail</a>
<a href="http://www.aol.com">AOL</a></div>

<!--1st drop down menu -->                                                   
<div id="dropmenu5" class="dropmenudiv2">
<a href="http://www.dynamicdrive.com/">Bottom</a>

<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>

<!--2nd drop down menu -->                                                
<div id="dropmenu6" class="dropmenudiv2" style="width: 150px;">
<a href="http://www.cnn.com/">Bottom 2</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a></div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu7" class="dropmenudiv2" style="width: 150px;">
<a href="http://www.google.com/">Bottom 3</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a></div>

<script type="text/javascript">
cssdropdown2.startchrome("navmenu", "navmenu2")
</script>

</body>

Note the part in red as well- when defining multiple Chrome menus on the page, you initialize them using the same startchrome() function, not a new one each time.

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

[kris@ennis]

Thanks ddadmin. I'll test that out soon.

The reason I added a new function was to change the position of the down arrow to an up arrow for the bottom. If theres an easier way to do this, I'd appreciate some help there.

Also, with that said, is there a way to force the drop downs to pop up instead? I did notice that when the drop downs on the dynamicdrive website were close to the bottom of the browsers screen, they popped up automatically. Is there a way to force this?

I haven't added the credit notice because it wasn't included with the original scripts, except on the javascript page, and I thought that was all that was necessary. Plus the page you are viewing is on a test site. I will add soon.

Thanks again, and I hope to hear from you soon!

[ddadmin]

Regarding specifying a different drop down arrow image for each instance of the menu on your page, you can enable this feature inside the .js file by first replacing the line:

dropdownindicator: '<img src="down.gif" border="0" />',

with:

dropdownindicator: ['<img src="down.gif" border="0" />', '<img src="downalt.gif" border="0" />'],

The new line creates an array of down arrow images (2 in this case assuming you have 2 instances of the menu on your page).

Then, also find the below line inside the .js file, and add to it the new part in red:

menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator[ids]

Regarding forcing the menu to always drop up, there is an easy way to do this, but the behavior would affect both instances of the menus on your page, which I doubt is what you want.

[kris@ennis]

I could just have 2 javascript files, one for drop downs and the other for a drop up, correct?

That was my initial thought and why I had two funtions in my original site. This would also allow me to do different arrows (although your other fix did work well). I don't mind doing to different functions if it means I can get the code to do what I need. Thanks!

[ddadmin]

You could include two copies of chrome.js on your page, making sure to rename all instances of variable/ function names in the later to something else to avoid conflicting with the first .js file's. However, that is extreme overkill IMO. Is the only thing left that you need to be able to do have one Chrome menu always drop up, versus another that behaves normally?

[kris@ennis]

"Is the only thing left that you need to be able to do have one Chrome menu always drop up, versus another that behaves normally? "

That is correct. Thanks!

[ddadmin]

Ok, I'll try and find some time later today or tomorrow to see if I can add such an ability to the existing chrome.js file.

[kris@ennis]

That would be amazing ddadmin. I may just remove the arrows all together, so if you can get one .js file to work w/ both up and down drops, that would be fine. I really do appreciate your help!

[ddadmin]

As promised, try the below modified chrome.js file. It incorporates the first feature of being able to specify more than 1 down arrow image, and also, the ability to get a particular drop down menu to always drop up. To specify this, in your HTML for the tabs, add the "rev" attributes in red below:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1" rev="up">Resources</a></li>
<li><a href="#" rel="dropmenu2" rev="up">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>	
</ul>
</div>

In this case, the first and second menu items will always drop up, while the last behaves like it does before.