#1193 ✓resolved
Peter

Menu Access to Tabbed Text

Reported by Peter | August 21st, 2014 @ 02:52 PM

I have created a number of pages with tabs. In the menu I have an item for each tab, using pagename#tab1 / #tab2 etc.

When I select a tab from the menu the page opens correctly and shows the correct tab. However I cannot change to a different tab using the menu, I have to click on the tab.

Whilst I could instead create a separate page for each tab instead, and thus be able to select the page from the menu, this does not work in the mobile web site, because the drop down menus don't work, therefore I need the tabs.

Please advise. Thank you.

Comments and changes to this ticket

  • dleffler

    dleffler August 21st, 2014 @ 07:51 PM

    • Assigned user changed from “expNinja” to “dleffler”

    This is an html limitation...in order to jump to an anchor on the same page, you can only have the hashtag/anchor-name. Here's a possible solution, though it's not easy...having a two line/level menu (instead of a dropdown one) with the top line being the pages and the line below it being the anchors on the page. That's what we do on http://www.exponentcms.org/about-exponent.htm. The template looks like:

    <div class="navigationmodule top-nav">
        <ul>
        {$isparent=0}   
        {foreach from=$sections item=section}
        {if $section->parent == 0}       
            {if $current->parents[0]!=""}
                {foreach from=$current->parents item=parent}
                    {if $parent==$section->id}
                        {$isparent=1}               
                    {/if}
                {/foreach}
            {/if}       
            {if $section->active == 1}
                <li{if $section->id==$current->id || $isparent==1} class="current"{/if}><a class="navlink" href="{$section->link}"{if $section->new_window} target="_blank"{/if}>{$section->name}</a></li>
            {else}
                <li><span class="navlink">{$section->name}</span></li>
            {/if}
            {/if}
            {$isparent=0}
        {/foreach}
        </ul>
        {getnav type="children" of=$current->parents.0|default:$current->id assign=children}
        {if $children|@count>0}
        <ul class="subnav">
            {foreach from=$children item=child}
                <li>
                    <a href="{$child->link}"><span{if $current->id==$child->id} class="current"{/if}>{$child->name}</span></a>
                </li>
            {/foreach}
        </ul>
        {/if}
        {clear}
    </div>
    
  • Peter
  • dleffler

    dleffler August 30th, 2014 @ 01:14 AM

    • State changed from “new” to “resolved”
    • Tag set to navigation

    Looks like this one is resolved

  • Peter

    Peter January 29th, 2015 @ 11:35 AM

    As we approach launch date for the web site, I need to resolve this anchor problem. Please could you tell me where the code above should be inserted for it to work. I've experimented on the old development site in the theme index.php file without success. Is there anything else I would need to do other than add this code?

    Thank you!

  • dleffler

    dleffler January 29th, 2015 @ 11:51 AM

    Ok,
    1. Create the main pages (top level menus) as content pages
    2. Create the sub/child pages for each top level page as external page links, but the url would ONLY be the anchor #tab1
    3. Create a custom navigation template with the above code in a file named something like /themes/mycustomtheme/modules/navigation/views/navigation/showall_tab-menu.tpl
    4. In the theme/subtheme template add a line

    <?php expTheme::module(array("controller"=>"navigation","action"=>"showall","view"=>"showall_tab-menu")); ?>
    
  • Peter

    Peter January 29th, 2015 @ 02:26 PM

    Thank you. I've tried this and it doesn't look like it will help. By producing another menu at the top of the page, you are just repeating the same thing as the tabbed page itself. What I wanted was to go to a tab directly from the pull down even if you are already on the page. Looking at your http://www.exponentcms.org/about-exponent.htm page you don't have tabbed sections, so it works for you.

    One slightly clunky solution is to create a sub-page for each drop down with a redirect to the page and tab you want in a code snippet. Example:

       <script type="text/javascript">
            window.location.href = "http://www.sandtoft.org/new_site/install/links#tab2"
        </script>
    

    This does seem to work as needed, am doing further tests. So far the only problem I see is if I want to change the link I don't seem to be able to get back to edit the code snippet, as the page redirects immediately!! I'm experimenting on the test site at sandtoft.slx-online.biz if you want to have a look - Related Links tab.

    Regards.
    Peter.

  • dleffler

    dleffler January 29th, 2015 @ 11:03 PM

    The correct syntax for selecting a yui tab is

    http://localhost/administration/configure_site#tab=2
    
    This doesn't work with bootstrap2/3 since we don't support tab histories yet.
    

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Bug Tracker for Exponent CMS

Shared Ticket Bins

People watching this ticket

Attachments

Tags

Pages