raoul2000/yii2-slideout-widget

The SlideOut widget is a wrapper around the slideout.js plugin, a touch slideout navigation menu for your mobile web apps

yii2-slideout-widget

The Slideout widget is a wrapper around the slideout.js plugin,, _(*1)

...A touch slideout navigation menu for your mobile web apps., _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

php composer.phar require --prefer-dist raoul2000/yii2-slideout-widget "*"

or add, _(*5)

"raoul2000/yii2-slideout-widget": "*"

to the require section of your composer.json file., _(*6)

Usage

Using Slideout widget is easy : you need some markup and some CSS (snippets below are retrieved from the sideout.js demo site) :, _(*7)

The markup, _(*8)

<nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>

The CSS, _(*9)

html,
body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: none;
}

.slideout-panel {
  position:relative;
  z-index: 1;
}

.slideout-open,
.slideout-open body {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

And then eventually, the Slideout widget, and somewhere in the page a button to open/close the menu :, _(*10)

 [
        'panel' =>  new yii\web\JsExpression("document.getElementById('panel')"),
        'menu' => new yii\web\JsExpression("document.getElementById('menu')"),
        'padding' => 256,
        'tolerance' => 70
    ]
]); 

?>

<button onclick="yii2_raoul2000_slideout.toggle();">toggle menu</button>

The javascript variable yii2_raoul2000_slideout has been created by the widget so you can access the slideout menu instance from anywhere in the page. In the example above, the onclick handler invokes toggle() which is part of the slideout API., _(*11)

You may also note that both option panel and menu are expected to be JS objects (and not selectors)., _(*12)

For more information on the plugin options, please refer to slideout github page., _(*13)

Alternative

• yii2-jpanelmenu-widget
• yii2-sidr-widget

License

yii2-slideout-widget is released under the BSD 3-Clause License. See the bundled LICENSE.md for details., _(*14)