Create a popout menu in Sharepoint / use of SP.UI.PopoutMenu

Marc Source

I would like to create a popout menu with javascript in sharepoint like when you click on the first element in a document library:

enter image description here

I think it should be possible to use the SP.UI.PopoutMenu but the MSDN documentation is more then poor on this element and can't find any tutorial how to use it.

If I just try to open it like this nothing happens:

var anchorId = 'myAnchorId',
    menuId = 'myMenuDivId',
    iconId = '',
    anchorOpenCss = '', 
    textDirection = 'ltr', 
    closeIconUrl = '', 
    isClustered = false, 
    x = 500, 
    y = 500, 
    height = 500, 
    width = 500;

SP.UI.PopoutMenu.createPopoutMenuInstanceAndLaunch(anchorId, menuId, 
    iconId, anchorOpenCss, textDirection, closeIconUrl, isClustered, 
    x, y, height, width);

Any ideas?

PS: I don't want to extend the menu of a document library, I want to create an own popout menu!



answered 5 years ago Dan #1

I have never used the PopoutMenu object before, but what you are pointing too is the Context Menu or the Edit Control Block (ECB) menu. I tried to come up with a working sample for the PopoutMenu, but you are right, its difficult to use. I did find this article on using a custom ecb menu in a sharepoint gridview if this helps:

answered 5 years ago user3416506 #2

Well, i might be too late for the party but i got it working on SharePoint 2013 There is still no real documentation to be found on the front end popoutmenu, but messing around with the back-end version i reverse engineered everything :)

Disclaimer: I haven't tested all of the possibilities with this PopoutMenu thingy, i'm not sure if the elements below have to be in said order with said tags, i'm almost sure they don't in fact, and you can have them in any other, tags, classes. But don't take my word for it.

This configuration just makes everything look nice.

<a id="anchorID">
    Cool Test bro
<div class="ms-popoutMenu ms-breadcrumb-menu" id="menuID" style="display:none">
    Content and ...
    <div> Divs and
        <a href="">And Links</a>

<script type="text/javascript">
var menu = new SP.UI.PopoutMenu("anchorID", "menuID", "", "", "ltr", "", false);

comments powered by Disqus