Dropdown menu in context "user-login"

[Watashifr]

Please consider the following code:

<div class="page-header bg-color-white" style="z-index:1000">
    <div class="page-header-content ">
        <h1>Title</h1>
        <ul class="menu">
            <li data-role="dropdown">
                <a href="#">
                    <div class="user-login">
                        <div class="name">
                            <span class="first-name">First</span>
                            <span class="last-name">Last</span>
                        </div>
                        <div class="avatar">
                            <img src="/usr/watashi/avatar100.png" />
                        </div>
                    </div>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Logoff</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

The idea is a context menu that appears when the avatar/username is clicked, but this concept seems to not work. Any thoughts?

[JohnArcher]

Seems you forgot to include dropdown.js:

<script type="text/javascript" src="js/modern/dropdown.js"></script>

Nevertheless, the dropdown box does not appear under the user area on the right, but instead on the left (see screenshot). :-( Any chance to align that properly?

[Watashifr]

the dropdown script is included on the page (I only pasted part of the html). I can align the menu in the proper place by placing the <ul class="dropdown-menu"> inside the <a> tag, but I'm following the example found on the metroui website. When I set the ul to "dropdown-menu open" it will display in the correct place, but it will never close (or open). Another thing: my page shows a bullet point at the top left corner, belonging to the <li data-role="dropdown">.

[JohnArcher]

So, the dropdown menu works for you? Then, what was your initial problem?

[Watashifr]

check http://10ti.me/screenshot.png

[Watashifr]

it doesn't. With "dropdown-menu open" it displays (but does not close), without "open" it does not show at all.

[JohnArcher]

Hm, the link does not seem to work (for me).

At least, I also recognized the bullet point at top left on my site, too ...

[Watashifr]

screenshot link fixed (sorry).

[JohnArcher]

Hm, ok, I see. Well, I hope @olton has an idea, as I also need that functionality. :-)

[Watashifr]

So yeah, this sort of turned into a feature request I guess: dropdown menus from "any given" (clickable) object.

[JohnArcher]

+1

[icardo]

I believe I did this earlier this week..

<div data-role="dropdown">

    <div class="tile icon">
    <div class="tile-content">
        <span class="icon-user"></span>
    </div>
</div>

    <ul class="dropdown-menu">
        <li><a href="/logout">Logout</a></li>
    </ul>

</div>

<div>
Ricardo Assing<span>Admin</span>
</div>

Clicking on the red colored tile shows the menu.

Of course you need a bit of CSS.

ul.dropdown-menu {
position:absolute;
right:10px;
}

The CSS shown is just for the dropdown.

[icardo]

I also had an issue with dropdown.js where if I added event handlers to my dropdown menu items, they weren't being triggered. I have a fix for this and made a pull request.

[Watashifr]

trying to recreate your solution, but to no avail. class="dropdown-menu open" shows the menu renders in the right place, but it does not appear when the icon is clicked. Code below

[Watashifr]

<div class="page-header bg-color-white" style="z-index:1000">
    <div class="page-header-content ">
        <h1>Title</h1>
        <div data-role="dropdown">
        <div class="user-login">
                <div class="name">
                    <span class="first-name">First</span>
                    <span class="last-name">Last</span>
                </div>
                <div class="avatar">
                    <img src="/usr/watashi/avatar100.png" />
                </div>
        </div>
        <ul class="dropdown-menu open">
            <li><a href="#">Logoff</a></li>
            <li><a href="/me">Me</a></li>
        </ul>                    
        </div>
    </div>
</div>

[icardo]

I copied your markup and tested. It didn't work. Made some adjustments, try this which DID work:

<div data-role="dropdown" id="auth-menu">
    <div class="user-login">
            <div class="name">
                <span class="first-name">First</span>
                <span class="last-name">Last</span>
            </div>
            <div class="avatar">
                <img src="/usr/watashi/avatar100.png" />
            </div>
    </div>
<ul class="dropdown-menu">
        <li><a href="#">Logoff</a></li>
        <li><a href="/me">Me</a></li>
    </ul>             
</div>

CSS:
#auth-menu {
float:right;
position:relative;
}
#auth-menu > ul.dropdown-menu {
position:absolute;
right:10px;
}

Of course you can play around with the CSS to position wherever you want.

[Watashifr]

Sorry, was away over easter. Tested today and no luck. When I set

it displays correctly, but it seems I'm missing a trigger for the menu to open (and I can't figure out what that trigger should be).

[Watashifr]

Ho hum. Forgot to include jquery. Excuse me whilst I crawl under a rock and shoot myself.

[JohnArcher]

Thanks a lot, @icardo ! Works perfectly!

Nevertheless, I think it would be great if @olton would incorporate that as a built in function/control type, as I don't want to fiddle with that custom css in my project. Any chance? Спасибо! :-)