Default

Click Trigger

Overlay

$('#tm1').puitieredmenu();
                                
<ul id="mb1" >
 <li >
    <ul >
        <li />
        <li />
    </ul >
 </li >
 <li />
 <li />
</ul >
                                
Name Type Default Description
autoDisplay boolean true Displays without the mouse click

No events.

Name Parameters Description
show - Shows Menu.
hide - Hides Menu.
align - Align Menu.
$('#tm1').puitieredmenu();

$('#tm2').puitieredmenu({
    autoDisplay: false
});

$('#tm3').puitieredmenu({
    popup: true,
    trigger: $('#tm3trigger')
});

$('button').puibutton();
                                
<h3 class="first">Default</h3>
<ul id="tm1">
    <li> <a data-icon="fa-file-o">File</a>
        <ul> 
            <li><a data-icon="fa-plus">New</a>
                <ul>
                    <li><a>Project</a></li>
                    <li><a>Other</a></li>
                </ul>
            </li> 
            <li><a>Open</a></li> 
            <li><a>Quit</a></li> 
        </ul>
    </li>"
    <li> <a data-icon="fa-edit">Edit</a>
        <ul>
            <li><a data-icon="fa-mail-forward">Undo</a></li>
            <li><a data-icon="fa-mail-reply">Redo</a></li>
        </ul>
    </li>
    <li>
        <a data-icon="fa-question">Help</a>
        <ul>
            <li><a>Contents</a></li>
            <li>
                <a data-icon="fa-search">Search</a>
                <ul>
                    <li><a>Text</a>
                        <ul>
                            <li><a>Workspace</a></li>
                        </ul>
                    </li>
                    <li><a>File</a></li>
                </ul>
            </li>

        </ul>

    </li>
    <li>
        <a data-icon="fa-gear">Actions</a>
        <ul>
            <li><a data-icon="fa-refresh">Edit</a>
                <ul>
                    <li><a data-icon="fa-save">Save</a></li>
                    <li><a data-icon="fa-save">Update</a></li>
                </ul>
            </li>
            <li><a data-icon="fa-phone">Other</a>
                <ul>
                    <li><a data-icon="fa-minus">Delete</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a data-icon="ui-icon-close">Quit</a>
    </li>
</ul>

<h3>Click Trigger</h3>
<ul id="tm2">
    <li> <a data-icon="fa-file-o">File</a>
        <ul> 
            <li><a data-icon="fa-plus">New</a>
                <ul>
                    <li><a>Project</a></li>
                    <li><a>Other</a></li>
                </ul>
            </li> 
            <li><a>Open</a></li> 
            <li><a>Quit</a></li> 
        </ul>
    </li>
    <li> <a data-icon="fa-edit">Edit</a>
        <ul>
            <li><a data-icon="fa-mail-forward">Undo</a></li>
            <li><a data-icon="fa-mail-reply">Redo</a></li>
        </ul>
    </li>
    <li>
        <a data-icon="fa-question">Help</a>
        <ul>
            <li><a>Contents</a></li>
            <li>
                <a data-icon="fa-search">Search</a>
                <ul>
                    <li><a>Text</a>
                        <ul>
                            <li><a>Workspace</a></li>
                        </ul>
                    </li>
                    <li><a>File</a></li>
                </ul>
            </li>

        </ul>

    </li>
    <li>
        <a data-icon="fa-gear">Actions</a>
        <ul>
            <li><a data-icon="fa-refresh">Edit</a>
                <ul>
                    <li><a data-icon="fa-save">Save</a></li>
                    <li><a data-icon="fa-save">Update</a></li>
                </ul>
            </li>
            <li><a data-icon="fa-phone">Other</a>
                <ul>
                    <li><a data-icon="fa-minus">Delete</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a data-icon="ui-icon-close">Quit</a>
    </li>
</ul>

<h3>Overlay</h3>
<button id="tm3trigger" style="margin-top:0px">Show</button>
<ul id="tm3">
    <li> <a data-icon="fa-file-o">File</a>
        <ul> 
            <li><a data-icon="fa-plus">New</a>
                <ul>
                    <li><a>Project</a></li>
                    <li><a>Other</a></li>
                </ul>
            </li> 
            <li><a>Open</a></li> 
            <li><a>Quit</a></li> 
        </ul>
    </li>
    <li> <a data-icon="fa-edit">Edit</a>
        <ul>
            <li><a data-icon="fa-mail-forward">Undo</a></li>
            <li><a data-icon="fa-mail-reply">Redo</a></li>
        </ul>
    </li>
    <li>
        <a data-icon="fa-question">Help</a>
        <ul>
            <li><a>Contents</a></li>
            <li>
                <a data-icon="fa-search">Search</a>
                <ul>
                    <li><a>Text</a>
                        <ul>
                            <li><a>Workspace</a></li>
                        </ul>
                    </li>
                    <li><a>File</a></li>
                </ul>
            </li>

        </ul>

    </li>
    <li>
        <a data-icon="fa-gear">Actions</a>
        <ul>
            <li><a data-icon="fa-refresh">Edit</a>
                <ul>
                    <li><a data-icon="fa-save">Save</a></li>
                    <li><a data-icon="fa-save">Update</a></li>
                </ul>
            </li>
            <li><a data-icon="fa-phone">Other</a>
                <ul>
                    <li><a data-icon="fa-minus">Delete</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a data-icon="ui-icon-close">Quit</a>
    </li>
</ul>