API introduction

After the plugin has been fired, an API is available for the menu. With this API, you can trigger the plugin methods or bind new function to them. The API is stored in the "mmenu" data-attribute.

Note that add-ons might have their own set of API methods and hooks.

Trigger methods

Trigger the API methods to control the plugin manually.

<script>
   $(document).ready(function() {
      $("#my-menu").mmenu();

      //   Get the API
      var api = $("#my-menu").data( "mmenu" );

      //   Trigger a method
      api.openPanel( $("#my-panel") );
   });
</script>

Available methods to trigger

Method( arguments )	Default value	Datatype	Description
closeAllPanels			Trigger this method to close all opened panels and go back to the first panel.
closePanel			Trigger this method to close a panel (only available if the "slidingSubmenus" option is set to `false`).
(
$panel		jQuery object	The panel to close.
)
getInstance			Trigger this method to get the class instance for the menu.
initPanels			Trigger this method to (re)initialize (a) newly added panel(s).
(
$panel		jQuery object	The panel to (re)initialize.
)
openPanel			Trigger this method to open a panel.
(
$panel		jQuery object	The panel to open.
)
setSelected			Trigger this method to make a menu item appear "selected".
(
$li		jQuery object	The menu item to appear "selected".
selected	`true`	Boolean	Whether to set or make the menu item appear "selected".
)

Note that add-ons might have their own set of API methods.

Hook into methods

Hook a new function into the API methods with the hooks option or the API bind method.

<script>
   $(document).ready(function() {
      var $menu = $("#my-menu");

      //   With the hooks option
      $menu.mmenu({
         hooks: {
            "openPanel:start": function( $panel ) {
               console.log( "This panel is now opening: #" + $panel.attr( "id" ) );
            },
            "openPanel:finish": function( $panel ) {
               console.log( "This panel is now opened: #" + $panel.attr( "id" ) );
            }
         }
      });

      //   With the API bind method
      var api = $("#my-menu").data( "mmenu" );

      api.bind( "openPanel:start", function( $panel ) {
         console.log( "This panel is now opening: #" + $panel.attr( "id" ) );
      });
      api.bind( "openPanel:finish", function( $panel ) {
         console.log( "This panel is now opened: #" + $panel.attr( "id" ) );
      });
   });
</script>

Available API hooks

closeAllPanels:before: Invoked before anything when closing all panels.
closeAllPanels:after: Invoked after everything when closing all panels.
closePanel:before: Invoked before anything when trying to close a panel.
closePanel: Invoked after a panel finishes closing.
closePanel:after: Invoked after everything when trying to close a panel.
openPanel:before: Invoked before anything when trying to open a panel.
openPanel:start: Invoked before a panel starts opening.
openPanel:finish: Invoked after a panel finishes opening.
openPanel:after: Invoked after everything when trying to open a panel.
setSelected:before: Invoked before making a menu item appear "selected".
setSelected:after: Invoked after making a menu item appear "selected".

Note that the :before and :after hooks will always be invoked, regardless of any conditions done in the method.
Note that add-ons might have their own set of API hooks.