Slashdot Menu - Expanding a specific Submenu

[BearBug]

1) Script Title: Slashdot Menu

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

3) Describe problem:


// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu); // Expand a submenu
myMenu.collapseMenu(firstSubmenu); // Collapse a menu
myMenu.toggleMenu(firstSubmenu); // Expand if collapsed and collapse if expanded

myMenu.expandAll(); // Expand all submenus
myMenu.collapseAll(); // Collapse all submenus

I had tried to expand a submenu "myMenu.expandMenu(firstSubmenu);". But everytime when the page load, all menu are collapsed.

Can anyone share or guide me in regards to expanding a specific submenu?

[jscheuer1]

It's a little misleading. The word:


firstSubmenu

is just a placeholder or example. You need to identify the DOM node of the submenu. So let's say you add an id to the markup (addition highlighted):


<div style="float: left" id="my_menu" class="sdmenu">
<div id="firstone">
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="http://www.dyn . . .

Then you can do:


myMenu.expandMenu(document.getElementById('firstone'));

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[BearBug]

It's a little misleading. The word:



is just a placeholder or example. You need to identify the DOM node of the submenu. So let's say you add an id to the markup (addition highlighted):


<div style="float: left" id="my_menu" class="sdmenu">
<div id="firstone">
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="http://www.dyn . . .

Then you can do:


myMenu.expandMenu(document.getElementById('firstone'));

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Thanks! It works perfectly!

[Malatest]

Thanks! It works perfectly!

For all menu links under one category, the coding is class="expand" while other categories are "collapsed" until they choose another category, then that category is expanded when they choose all the menu items while the first category is collapsed. I did this for each individual file and it worked perfectly in both IE 8 and google chrome on my computer (prior to uploading the website). When testing it from our server, it doesn't do what it's supposed to do. (collapse vs. expand)

First 5 asp files under upcoming events have this coding:


<div align="left" class="expand">
<span>Upcoming Events</span>
<a href="luncheons.asp">Council Meetings/Member Lunches</a>
<a href="agm.asp">Annual General Meeting</a>
<a href="ufe-dates.asp">UFE Dates</a>
<a href="convocation.asp">Convocation</a>
<a href="upcoming.asp">Professional Development</a>

</div>
<div align="left" class="collapsed">
<span>Professional Opportunities</span>
<a href="employment.asp">Employment Opportunities</a>
<a href="volunteer.asp">Volunteer Opportunities</a>
<a href="http://www.casource.com/" target="_blank">CA Source</a>
<a href="http://www.directorssource.com/" target="_blank">Directors Source</a>

</div>

Under professional opportunities, all asp files have this coding:


<div align="left" class="collapsed">
<span>Upcoming Events</span>
<a href="luncheons.asp">Council Meetings/Member Lunches</a>
<a href="agm.asp">Annual General Meeting</a>
<a href="ufe-dates.asp">UFE Dates</a>
<a href="convocation.asp">Convocation</a>
<a href="upcoming.asp">Professional Development</a>

</div>
<div align="left" class="expand">
<span>Professional Opportunities</span>
<a href="employment.asp">Employment Opportunities</a>
<a href="volunteer.asp">Volunteer Opportunities</a>
<a href="http://www.casource.com/" target="_blank">CA Source</a>
<a href="http://www.directorssource.com/" target="_blank">Directors Source</a>

</div>

Like I said, it works well when testing on my computer through both browsers but no longer works upon uploading it. I didn't change anything in the js file. If you require more from me, please let me know. I hope you can help :)

[traq]

If something works locally but not on the live server, the first thing I check is that all of the file paths are correct.

If you need more help than this, you should start a new thread on the topic.