DD Tab menu - default submenu link?

[roystik]

1) Script Title: DD Tab menu

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

3) Describe problem:

So I started playing around with the tabs, navigation and css. I created submenus for each tab, like so:


<DIV class="tabcontainer">
<div id="ct1" class="tabcontent">&nbsp;</div>
<div id="ct2" class="tabcontent"> <span><a href="subtab1a.htm">Sub Tab 1a</a></span> <span><a href="subtab1b.htm">Sub Tab 1b</a></span> <span><a href="subtab1c.htm">Sub Tab 1c</a></span> <span><a href="subtab1d.htm">Sub Tab 1d</span></a> <span><a href="subtab1e.htm">Sub Tab 1e</a></span> </div>
<div id="ct3" class="tabcontent"> <span><a href="subtab2a.htm">Sub Tab 2a</a></span> <span><a href="subtab2b.htm">Sub Tab 2b</a></span> <span><a href="subtab2c.htm">Sub Tab 2c</a></span> <span><a href="subtab2d.htm">Sub Tab 2d</span></a> <span><a href="subtab2e.htm">Sub Tab 2e</a></span> </div>
<div id="ct4" class="tabcontent"> &nbsp; </div>
<div id="ct5" class="tabcontent"> &nbsp; </div>
</DIV>

My question is this: is it possible to apply the default tab functionality of the script to the submenu? Say, if you go to the Sub Tab 1d page, not only will the default tab be highlighted but the Sub Tab 1d link as well?

I'm attaching my files in case it will be of help. Thanks!

[ddadmin]

Well, the general idea would be to add another function that loops through every link within the desired sub level container (ie: <div id="ct2" class="tabcontent">..</div>), and highlight the desired link by giving it an ID of "current". Try adding the below to the very end of ddtabmenu.js:


ddtabmenu._selectsub=function(sublevel, dselected){
var submenus=document.getElementById(sublevel).getElementsByTagName('a')
for (var i=0; i<submenus.length; i++){
if (i==dselected)
submenus[i].className="current"
}
}

ddtabmenu.selectsub=function(sublevel, dselected){
this.addEvent(window, function(){ddtabmenu._selectsub(sublevel, dselected)}, "load")
}

Then following your original code to initialize the menu, add the below to also highlight of of the sub menu links:


ddtabmenu.definemenu("ddtabs", "auto") //initialize Tab Menu #4 with 1st tab selected
ddtabmenu.selectsub('ct2', 2)

Here I'm saying highlight the 3rd link within the sub menu DIV with ID=ct2.

[roystik]

First of all, thanks for the code, and I've added them as instructed.

However, while the appropriate submenu link is being highlighted when you mouseover the appropriate tab, when you actually go to the submenu's page, the tabcontainer div doesnt show up.

[ddadmin]

the tabcontainer div doesnt show up.

Doesn't show up how? If you mean literally, that shouldn't have anything to do with the mod above, which merely manipulates the CSS classname of an existing sub menu.

[roystik]

I've uploaded the modified files. The blue bar (at least in my example) in subtab1a.htm doesnt show up, but it does in page1.html.

Maybe it's because I'm using the updated version of the ddtabmenu.js? I'm not sure. :(

[roystik]

Ok, I figured out why the submenus weren't showing: I was setting these to "auto", while I should have been using an integer, like so:


ddtabmenu.definemenu("ddtabs", 1)
ddtabmenu.selectsub('ct2', 0)