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

How To Trigger Popup Menu Over Avatar?

Discussion in 'Styling and Customization Questions' started by Anthony Parsons, May 2, 2012.

  1. Anthony Parsons

    Anthony Parsons Well-Known Member

    I am playing around with a new style where I want to trigger the normal visitor tab username link dropdown under the users avatar instead, but cannot seem to work out how to get the dropdown to trigger on hover.

    Does anyone have the solution to this?

    Unknown.png

    Right now I am trying to use:

    HTML:
    <li class="userAvatar navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">
    <a href="{xen:link account}" class="navLink accountPopup" rel="Menu">
    <xen:avatar user="$visitor" size="s" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" img="true" />
    </a>
    <div class="Menu JsOnly" id="AccountMenu">
    
    Default uses with a link, which obviously works fine:

    HTML:
    <li class="navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">
     
    <a href="{xen:link account}" class="navLink accountPopup" rel="Menu"><strong>{$visitor.username}</strong></a>
     
    <div class="Menu JsOnly" id="AccountMenu">
    
    Any ideas?
     
    Barbossa likes this.
  2. Barbossa

    Barbossa Active Member

    I like the idea, can I see it live please? I mean so far that you have done. :)
     
  3. Chris D

    Chris D XenForo Developer Staff Member

    When I replace your code with my default code I get the avatar appearing, but next to it is the standard down arrow. If I hover over this arrow, the menu appears. If I click the arrow, the menu also appears. But if I click the avatar I'm taken to my profile.

    It would seem at first glance that a) something is missing that should enable the menu to drop down (the down arrow) and b) that this may not work because the avatar helper doesn't just display the image, but also links back to the profile.

    EDIT: The code for the arrow is <span class="arrowWidget"> and this isn't called in the template. It seems like this is called in XenForo.js somehow and it is referenced in the code. Unfortunately I know nothing about javascript so I can't be entirely sure, but it may be something to do with that.
     
    Anthony Parsons likes this.
  4. Anthony Parsons

    Anthony Parsons Well-Known Member

    No... it is not publicly available and I have no intention of making it available until much closer to complete.

    Thanks Yorick... that actually does give me some further ideas on how to maybe get this to work.

    The trigger typically is activated on the href, so maybe I need to activate it on the img instead. Will go play and see what can occur.
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The <xen:avatar ...> tag returns an image and an anchor (<a href...><img ... /></a>). So you end up with two anchors in your context. You need just the image tag which requires slightly different code:

    Code:
    <li class="userAvatar navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">
    <a href="{xen:link account}" class="navLink accountPopup" rel="Menu">
    <img src="{xen:helper avatar, $visitor, 's'}" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
    </a>
    <div class="Menu JsOnly" id="AccountMenu">
    
    This works in my testing.
     
    Yorick and Anthony Parsons like this.
  6. Anthony Parsons

    Anthony Parsons Well-Known Member

    Jake, you're a legend. I will give that a go ASAP.
     
  7. Anthony Parsons

    Anthony Parsons Well-Known Member

    Confirmed, that worked beautifully Jake and triggered the menu. Thank you very much.

    Now to play the frustrating game with styling a dropdown that works correctly.
     

Share This Page