1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Trying to add drop down in tabs. Problem.

Discussion in 'Styling and Customization Questions' started by Hristo Avramov, Aug 26, 2013.

  1. Hristo Avramov

    Hristo Avramov Active Member

    I am trying to add dropdown menu in the tabs. menus work fine in every situation, but when I am on page Members. Then all new menus and Members look like this and break. I simply copied the whole members drop down menu code. Can you point me if I can do something to fix this.
    Code:
    <!-- members -->
            <xen:if is="{$tabs.members}">
                <li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a>
                    <a href="{$tabs.members.href}" class="SplitCtrl" rel="Menu"></a>
                   
                    <div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks">
                        <div class="primaryContent menuHeader">
                            <h3>{$tabs.members.title}</h3>
                            <div class="muted">{xen:phrase quick_links}</div>
                        </div>
                        <ul class="secondaryContent blockLinksList">
                        <xen:hook name="navigation_tabs_members">
                            <li><a href="{xen:link members}">{xen:phrase notable_members}</a></li>
                            <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if>
                            <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                            <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                        </xen:hook>
                        </ul>
                    </div>
                </li>
            </xen:if>
           
            <!-- betting menu -->
            <xen:if is="{$tabs.members}">
                <li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <a href="#" class="navLink">Bookmaker Reviews</a>
                    <a href="{$tabs.members.href}" class="SplitCtrl" rel="Menu"></a>
                   
                    <div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks">
                        <div class="primaryContent menuHeader">
                            <h3>Bookmakers</h3>
                            <div class="muted">{xen:phrase quick_links}</div>
                        </div>
                        <ul class="secondaryContent blockLinksList">
                        <xen:hook name="navigation_tabs_members">
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>       
                                                </xen:hook>
                        </ul>
                    </div>
                </li>
            </xen:if>
     
            <!-- betting menu1 -->
            <xen:if is="{$tabs.members}">
                <li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <a href="#" class="navLink">Live Scores</a>
                    <a href="{$tabs.members.href}" class="SplitCtrl" rel="Menu"></a>
                   
                    <div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks">
                        <div class="primaryContent menuHeader">
                            <h3>Live Scores</h3>
                            <div class="muted">{xen:phrase quick_links}</div>
                        </div>
                        <ul class="secondaryContent blockLinksList">
                        <xen:hook name="navigation_tabs_members">
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>
                            <li><a href="http://www.w3schools.com">Visit W3Schools</a></li>       
                                                </xen:hook>
                        </ul>
                    </div>
                </li>
            </xen:if>
    
    Untitled.jpg
     
  2. EQnoble

    EQnoble Well-Known Member

    I would undo that and check out Nodes as Tabs ( http://xenforo.com/community/resources/nodes-as-tabs.9/ )

    It will allow you to easily create your own tabs and links and such. Then from there you customize the look you are trying to achieve.

    That's my best advice for you without knowing better what you are trying to do in entirety.
     
    Jake Bunce likes this.
  3. Hristo Avramov

    Hristo Avramov Active Member

    Thank you but some of the things are unachievable, I want to link to topics, not nodes. Is that possible with this mod?
     
  4. EQnoble

    EQnoble Well-Known Member

    You can create a Link Forum node which is stock included in xf and just put the url in which you want it redirected to
    linkForum.png
    When you install nodes as tabs you get many more options when creating or editing nodes.


    This is the same page with an older version of nat (newer ones have more options)
    natnode.png


    In this example I added a 'link forum' type of node (which links to your previous post in this thread) , made it not display in the node list and the parent node in the example (titled bbcodes) is set to display as a tab in the navigation and display the children. Since the children are set to not display in the node list but are set to show up in the navigation I end up with a custom tab with a custom menu.


    In your case...you could create a bunch of link forums with one acting as a parent to the rest and you make the parent whatever you want and the children will be the links in the menu.
     
    Jake Bunce and Hristo Avramov like this.
  5. Hristo Avramov

    Hristo Avramov Active Member

    That is very good tutorial, thank you very much. It is simple, but requires addon, if I cant find other solution I will make it your way. Thank you agian!
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You copied the members tab to use as a template for new tabs, but you didn't change the ids of your new tabs. You are still using {$tabs.members}, the 'members' class, and {xen:if $tabs.members.selected...}. Those all must be changed to differentiate between the tabs.
     
    Andrej likes this.
  7. Hristo Avramov

    Hristo Avramov Active Member

    Does it matter what I change them to?
     
  8. Jeremy

    Jeremy XenForo Moderator Staff Member

    No, but they need to be unique to your tab.
     

Share This Page