DD Tab Menu - current tab question

[roystik]

1) Script Title:
Script: DD Tab Menu

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

3) Describe problem:

One of the features I like about this script is that if you click on any of the tabs, when you go to that page the correct tab is highlighted i.e. if you click on the "CSS" tab it will take you to the CSS page with the "CSS" tab highlighted.

I was wondering if there was a way to highlight the links on the second level? I modified the script so that when you mouseover one of the tabs a second level of links appear. Sort of like dynamic drop down menus, but horizontal instead of vertical.

Here's a sample of the code I used for the submenu of Example 4:

<div id="ct2" class="tabcontent">
<a href="#"><span>Link 1</span></a> <a href="#"><span>Link 2</span></a> <a href="#"><span>Link 3</span></a> <a href="#"><span>Link 4</span></a> <a href="#"><span>Link 5</span></a> 
</div>

And here's the code for the <span> tabs' hover and highlight:

.tabcontent a:hover span{
padding: 5px;
color: white;
text-decoration:underline;
}

.tabcontent a.current span{
background-color: #0f0f3b;
padding: 5px;
}

Thanks in advance!

[roystik]

I just noticed that when you click on a link on the submenu, and you have the following set to "auto" on the target page, the current tab and submenu doesnt show up.

ddtabmenu.definemenu("ddtabs4", "auto")

[ddadmin]

Do you have an example of the problem as far as the current tab/ submenu not showing up when set to "auto"? The script basically tests for an exact match between the URL specified in a tab and the current page's. That is to say, it's a very rudimentary check.

[roystik]

Do you have an example of the problem as far as the current tab/ submenu not showing up when set to "auto"? The script basically tests for an exact match between the URL specified in a tab and the current page's. That is to say, it's a very rudimentary check.

Sorry it took so long for me to respond. Anyway, here are the files I'm using to test the script. Only the second tab (About Us) and the first link of that tab (Mission) has live links, the rest are dead links.

When you click on the About Us tab, it works, but when you click on the Mission link, the tabcontent div doesnt show up. Any thoughts on why?

[roystik]

Hi Guys,

Any ideas on what could be causing this problem?

[ddadmin]

In the case of page3.html, you haven't defined any tabs with a link that matches "page3.html", hence the auto select feature fails to select any of the tabs by default. Here are your tabs:

<div id="ddtabs4" class="ddcolortabs">
<ul>
<li><a href="page1.html" rel="ct1"><span id="tab1">Home</span></a></li>
<li><a href="page2.html" rel="ct2"><span id="tab2">About Us</span></a></li>
<li><a href="#" rel="ct3"><span id="tab3">Products</span></a></li>
<li><a href="#" rel="ct4"><span id="tab4">Services</span></a></li>
<li><a href="#" rel="ct5"><span id="tab5">Client List</span></a></li>
<li><a href="#" rel="ct6"><span id="tab6">Contact Us</span></a></li>
</ul>
</div>

No page3.html as the hyperlink for any of the tabs...

[roystik]

Thanks for the reply.

page3.html is located here:

<DIV class="tabcontainer">

<div id="ct1" class="tabcontent">&nbsp;</div>

<div id="ct2" class="tabcontent">
<a href="page3.html"><span>Mission</span></a> <a href="#"><span>Constitution</span></a> <a href="#"><span>History</span></a> <a href="#"><span>Organizational Structure</span></a> <a href="#"><span>Recruitment</span></a>
</div>

My problem is, when clicking on a submenu link, when you get to that page the current tab isnt highlighted, and the submenu doesnt appear.

[ddadmin]

No, I mean on page3.html itself, at least one of your tabs need to have its href attribute set to "page3.html", so there is a match between the page's URL and one of the tab's. Right now since the script cannot find any match, no tab is selected by default, hence no sub content shown. So on page3.html, something like:

<div id="ddtabs4" class="ddcolortabs">
<ul>
<li><a href="page1.html" rel="ct1"><span id="tab1">Home</span></a></li>
<li><a href="page2.html" rel="ct2"><span id="tab2">About Us</span></a></li>
<li><a href="page3.html" rel="ct3"><span id="tab3">Products</span></a></li>
<li><a href="#" rel="ct4"><span id="tab4">Services</span></a></li>
<li><a href="#" rel="ct5"><span id="tab5">Client List</span></a></li>
<li><a href="#" rel="ct6"><span id="tab6">Contact Us</span></a></li>
</ul>

</div>

[roystik]

I see...so what do I need to do to so that if I click on a link on the submenu i.e. Mission under the About Us tab, how do I make the About Us tab highlighted when I go to the Mission page? What part of the script do I need to modify?

[ddadmin]

The "Mission" link points to "page3.html", while the href attribute of the "About Us" Tab is NOT "page3.html". So this no longer is an issue of selecting the current Tab, because the two don't correspond. The script only matches the Tab URLs themselves, not the URLs that may be contained within the sub contents.

Anyhow, to answer your question, on page3.html then, you need to tell the script to explicitly select a particular tab by default, in this case, the "About Us" tab (2nd tab):

ddtabmenu.definemenu("ddtabs4", 1)