Results 1 to 10 of 10

Thread: DD Tab Menu - current tab question

  1. #1
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default DD Tab Menu - current tab question

    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:

    HTML Code:
    <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:

    HTML Code:
    .tabcontent a:hover span{
    padding: 5px;
    color: white;
    text-decoration:underline;
    }
    
    .tabcontent a.current span{
    background-color: #0f0f3b;
    padding: 5px;
    }
    Thanks in advance!

  2. #2
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

    HTML Code:
    ddtabmenu.definemenu("ddtabs4", "auto")

  3. #3
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  4. #4
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    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?

  5. #5
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi Guys,

    Any ideas on what could be causing this problem?

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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...

  7. #7
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply.

    page3.html is located here:

    Code:
    <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.

  8. #8
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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>

  9. #9
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  10. #10
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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):

    Code:
    ddtabmenu.definemenu("ddtabs4", 1)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •