Printable View
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
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:
Note the part in red as well- when defining multiple Chrome menus on the page, you initialize them using the sameCode:<!--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>
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
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!
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:
with:Code:dropdownindicator: '<img src="down.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).Code:dropdownindicator: ['<img src="down.gif" border="0" />', '<img src="downalt.gif" border="0" />'],
Then, also find the below line inside the .js file, and add to it the new part in red:
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.Code:menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator[ids]
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!
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?
"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!
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.
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!
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:
In this case, the first and second menu items will always drop up, while the last behaves like it does before.Code:<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>
That works great ddadmin! Thanks for doing that! I have one other issue now though. When I scroll over the navigation and the dropdown/ups show, I cannot scroll over them and click the links. This happened when I moved the dropdown/up menus to the bottom of the code.
I've put the new site up so you can see the issue. See the link above.
Thoughts?
This problem only occurs in IE from my testing. It looks like a low z-index issue for the drop down DIVs themselves I believe. Inside dropdown.css/ dropdown2.css, change both of the line in red below to a higher z-index value:
See if that helps. BTW, in Firefox, your top chrome menu's drop downs are hidden behind the Flash display below it. Inside chrome.js, try removing the part in red below to enable the IFRAME shim technique for all browsers to see if that fixes the issue in FF:Code:z-index:1000;
Code:if (window.createPopup && !window.XmlHttpRequest &&!this.iframeshimadded){
The Z-index worked great, but removing that line from the js file didn't fix the Firefox issue. Any other thoughts?
Also, I really do appreciate all your help and work on this. I've learned a lot by talking with you, and cannot thank you enough!
Hmm if enabling IFRAME shim in FF doesn't do the trick for that browser either, try the technique discussed in this post by John then: http://www.dynamicdrive.com/forums/s...03&postcount=5
That did the trick! Thank you so much for your help! I have an issue with another script, but I'll start another post for it. Thanks again!
Hi all,
I was wondering if there was any code to remove the drop down image all together.
Thanks