AdminLTE/docs/javascript/push-menu.md

1.9 KiB

layout title
page Push Menu Plugin

The PushMenu plugin controls the toggle button of the main sidebar.

Usage

This plugin can be activated as a jQuery plugin or using the data api.

Data API

{: .text-bold } Add data-widget="pushmenu" to a button to activate the plugin.

<button class="btn btn-primary" data-widget="pushmenu">Toggle Sidebar</button>
jQuery

{: .text-bold }

$('.sidebar-toggle-btn').PushMenu(options)
Options

{: .mt-4}

|---

Name Type Default Description
autoCollapseSize Boolean/Number FALSE Screen width in pixels to trigger auto collapse sidebar
enableRemember Boolean FALSE Remember sidebar state and set after page refresh.
noTransitionAfterReload Boolean TRUE Hold Transition after page refresh.
animationSpeed Boolean 300 Set the animation/transition speed equals to the scss transition speed.
{: .table .table-bordered .bg-light}
Tip!

You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.

<button class="btn btn-primary" data-widget="pushmenu" data-auto-collapse-size="768">Toggle Sidebar</button>

{: .quote-info}

Events

{: .mt-4}

|---

Event Type  Description
collapsed.lte.pushmenu Fired when the sidebar collapsed.
collapsed-data.lte.pushmenu Fired when the sidebar is fully collapsed.
shown.lte.pushmenu Fired when the sidebar shown.
{: .table .table-bordered .bg-light}

Example: $(document).on('shown.lte.pushmenu', handleExpandedEvent)

Methods

{: .mt-4}

|---

Method Description
toggle  Toggles the state of the menu between expanded and collapsed.
collapse Collapses the sidebar menu.
expand Expands the sidebar menu
{: .table .table-bordered .bg-light}

Example: $('[data-widget="pushmenu"]').PushMenu('toggle')