How To Trigger Popup Menu Over Avatar?

[Anthony Parsons]

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?



Right now I am trying to use:

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

<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]

I like the idea, can I see it live please? I mean so far that you have done.

 

[Chris D]

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]

I like the idea, can I see it live please? I mean so far that you have done.

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

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.

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.

 

[Jake Bunce]

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:

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

 

[Anthony Parsons]

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

 

[Anthony Parsons]

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.