Вопрос о создании дополнительных подменю

[Vladimirovich]

Здравствуйте! На повестке дня вопрос о возможности создавать дополнительные кнопки подменю.
В данной теме обсуждалось как создать свои страницы для xenforo. Я использовал сие чудо, но так и не смог там же создать кнопки подменю. Само подменю впринципе можно вставить, но к сожалению я не смог привязать несколько страниц к одному пункту меню.
Собственно примеры:
Правка шаблона "navigation"
Оригинал:

<!-- extra tabs: middle -->
        <xen:if is="{$extraTabs.middle}">
        <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
          
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
              
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>

Если сделать как показано ниже, то подменю имеется, но при нажатии на кнопку "Test1" или "Test2", то выделение с пункта меню слетает и страница "Test1" или "Test2" как бы сами по себе:

<!-- extra tabs: middle -->
        <xen:if is="{$extraTabs.middle}">
        <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
          
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
              
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"><div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_members">
                        <li><a href="ru/test1">Test1</a></li>
                        <li><a href="bru/test2">Test2</a></li>
                    </xen:hook>
                    </ul></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>

При открытии страницы "Test1" или "Test2" происходит переключение на:

<!-- no selection -->
        <xen:if is="!{$selectedTab}">
            <li class="navTab selected"><div class="tabLinks"></div></li>
        </xen:if>
      
    </ul>
  
    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
</div>

<span class="helper"></span>
          
        </nav>  
    </div>
</div>

Данную проблему можно наглядно изучить:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Надеюсь на помощь. Если что не так, поправьте.

 

[Hope]

Вообще ничего не понял. :)

 

[Jumuro]

Данную проблему можно наглядно изучить:

Надеюсь на помощь. Если что не так, поправьте.

Так и не хватило терпения дождаться, когда страница загрузится.
И так же толком не понял из описания, в чем именно проблема.
Изложите вкратце.

 

[Hope]

Вот это Вам не поможет:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

?[DOUBLEPOST=1373909882,1373909825][/DOUBLEPOST]Или такой мануал:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Vladimirovich]

@Hope, К сожалнию это не вариант... Во первых платно. Во вторых врят ли это будет совместимо с EP.
К сожалению по второй ссылке мне не дают прочитать полностью

You do not have permission to view the full content of this resource.

@Jumuro, Странно страница относительно быстро загружается.[DOUBLEPOST=1373910479,1373910020][/DOUBLEPOST]@Jumuro, В краце: просто хочется добавить подменю без необходимости устанавливать аддоны.[DOUBLEPOST=1373910658][/DOUBLEPOST]@Hope, Если можете скиньте пожалуйста весь текст сюда(в спойлер или мне в личку).

 

[Hope]

Hello everyone,

This tutorial will help show you how to setup your XenForo navigation to allow dropdowns on all tabs and it is mainly for skins that want to heavily customize, clear up space in the header, or just want to stand out from the rest. By default, XenForo chooses to display the current tab without a menu and displays the contents of that menu inside the 'tabLinks' class, like so:



When you hover over unselected tabs, a menu will display, but this is not the case when you hover over the selected tab.

So lets begin! First, you need to go to your Appearance > Styles section then navigate to the theme of your choice > Templates > navigation. In this template, you will see a block of code for each tab. Here is what the forums looks like:

<!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">
                <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
                <a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks'} Menu JsOnly tabMenu">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                        <li><a href="{xen:link 'find-new/threads'}">{xen:phrase whats_new}</a></li>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>

Even though this is the forums tab, the code change is the same.

First, find:

<li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">

You will want to basically change this conditional to remove the else and pass the contents of else by default. So, all you need to do is turn the argument from "if selected, add the class of selected, else add the popup classes" to "if selected, add the class of selected" and thus the popup is left by default. The code for that would be this:

<li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">

There is one other change inside of the navigation template. Find:

<div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">

And change it to:

<div class="{xen:if {$tabs.forums.selected}, 'selectedMenu'} Menu JsOnly tabMenu">

We basically did the same thing, just cut the if condition statement short. With regards to this line of code, I also changed the class of 'tabLinks' to 'selectedMenu'. This is just added in case you want to customize the selected tab's menu.

There is also a small change in the CSS. This code simply displays the link that, when hovered, will open the menu. You can add this to your EXTRA.css file if you so choose:

.navTabs .navTab.selected .SplitCtrl {
    display: block;
}

So far we have a gap, and there are two things we can do about this, and which way you choose is entirely up to you:

1. We keep the tabLinks there as a link list as well as the menu we just added, or
2. We remove it altogether.

Here is where you split paths, whichever you may choose remember to not add any of the changes from the opposite method.

Using the first method

To begin, we basically need to duplicate the HTML then position it differently. So, still within the realm of just the forums tab, I added this above the code that displays the menu.

<xen:if is="{$tabs.forums.selected}">
                <div class="tabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                        <li><a href="{xen:link 'find-new/threads'}">{xen:phrase whats_new}</a></li>
                    </xen:hook>
                    </ul>
                </div>
                </xen:if>

Again, all I did was copy the menu, change the class to tabLinks, and wrapped it all in a conditional that ensured it only showed up on the selected tab's pages.

We also need to add one line of CSS to EXTRA.css to fix the positioning:

.navTabs .navTab.Popup {
    position: static;
}

And when all is said and done, with the first option you have this final result:



The second method, to remove it is as follows:

The way XenForo works is it pretty much maps out the header height elements, adds them all up, and thus you are able to slide the login bar down and move the header (with CSS) back to the top. So we basically need to tell the #headerProxy div that it has lost some weight. Since the main navigation and tabLink divs are both the same height, we just need to divide the height by two. But since XenForo is multiplying in the first place, we are just deleting the multiplication. So back in your EXTRA.css file, let's add this code:

#headerMover #headerProxy
{
    height: {xen:calc '@headerLogoHeight + @headerTabHeight + 2'}px;
}
#navigation .pageContent
{
    height: {xen:calc '@headerTabHeight + 2'}px;
    position: relative;
}

This has removed that extra space, but now the search has no place to rest other than on top of other content. You can choose what you wish, but the following code will position it nicely in the header aligned to the right. It also cleans it up a bit, background-wise:

#QuickSearch {
    top: -70px;
}
#QuickSearch,
#QuickSearch .formPopup  {
    background: none;
}
#QuickSearch.active {
    background: @content.background-color;
}

And when all is said and done, with the second option you have this final result:



NOTE: The privateTabs area (username, inbox, alerts, logout) already have dropdown menus (save for logout, but I don't think the logout should have a dropdown). So you have to use your best judgement here. For me, I just remove the tablinks for these tabs, since the links shown (Personal Details, Conversations, Your News Feed, Likes You've Received) all show up under the username dropdown anyways).

I know this tutorial is quite specific, but it really helped me customize some of the skins I make. After all, there is no rule that requires the default setup that XenForo has, although that is of course the most preferred.

Thanks and hope you enjoyed!
Mike Creuzer
Audentio.com[DOUBLEPOST=1373911380,1373911140][/DOUBLEPOST]Других вариантов нет. :)