SlideMenu SlideMenu displays submenus in with slide animation similar to ipod menus.

Default

        $('#default').puislidemenu();
                                
        <ul id="mb1" >
         <li >
            <ul >
                <li />
                <li />
            </ul >
         </li >
         <li />
         <li />
        </ul >

                                

No options.

No events.

Name Parameters Description
show - Shows Menu.
hide - Hides Menu.
align - Align Menu.
$('#sm1').puislidemenu();
                
$('#sm2').puislidemenu({
   popup: true,
   trigger: $('#sm2trigger')
});

$('button').puibutton();
                                
<ul id="sm1">
    <li> <a data-icon="ui-icon-document">File</a>
        <ul> 
            <li><a data-icon="ui-icon-contact">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="ui-icon-pencil">Edit</a>
        <ul>
            <li><a data-icon="ui-icon-arrowreturnthick-1-w">Undo</a></li>
            <li><a data-icon="ui-icon-arrowreturnthick-1-e">Redo</a></li>
        </ul>
    </li>
    <li>
        <a data-icon="ui-icon-help">Help</a>
        <ul>
            <li><a>Contents</a></li>
            <li>
                <a data-icon="ui-icon-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="ui-icon-gear">Actions</a>
        <ul>
            <li><a data-icon="ui-icon-refresh">Ajax</a>
                <ul>
                    <li><a data-icon="ui-icon-disk">Save</a></li>
                    <li><a data-icon="ui-icon-arrowrefresh-1-w">Update</a></li>
                </ul>
            </li>
            <li><a data-icon="ui-icon-document">Non-Ajax</a>
                <ul>
                    <li><a data-icon="ui-icon-close">Delete</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a data-icon="ui-icon-close">Quit</a>
    </li>
</ul>