PHPackages                             raoul2000/yii2-slideout-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. raoul2000/yii2-slideout-widget

ActiveYii2-extension[Utility & Helpers](/categories/utility)

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

22431JavaScript

Since Mar 12Pushed 11y ago2 watchersCompare

[ Source](https://github.com/raoul2000/yii2-slideout-widget)[ Packagist](https://packagist.org/packages/raoul2000/yii2-slideout-widget)[ RSS](/packages/raoul2000-yii2-slideout-widget/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

yii2-slideout-widget
====================

[](#yii2-slideout-widget)

The **Slideout widget** is a wrapper around the [slideout.js plugin](https://mango.github.io/slideout/),

> ...A touch slideout navigation menu for your mobile web apps.

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

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

```

or add

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

```

to the require section of your `composer.json` file.

Usage
-----

[](#usage)

Using Slideout widget is easy : you need some markup and some CSS (snippets below are retrieved from the [sideout.js demo site](https://mango.github.io/slideout/)) :

**The markup**

```

    Menu

    Panel

```

**The CSS**

```
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 :

```

toggle menu
```

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.

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

For more information on the plugin options, please refer to [slideout github page](https://github.com/Mango/slideout).

Alternative
-----------

[](#alternative)

- [yii2-jpanelmenu-widget](https://github.com/raoul2000/yii2-jpanelmenu-widget)
- [yii2-sidr-widget](https://github.com/raoul2000/yii2-sidr-widget)

License
-------

[](#license)

**yii2-slideout-widget** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/ec7e087ebb28d42d781766dce67eb6d8911a11a5e3dd7e793800f506d17f0a00?d=identicon)[raoul2000](/maintainers/raoul2000)

---

Top Contributors

[![raoul2000](https://avatars.githubusercontent.com/u/1474310?v=4)](https://github.com/raoul2000 "raoul2000 (2 commits)")

### Embed Badge

![Health badge](/badges/raoul2000-yii2-slideout-widget/health.svg)

```
[![Health](https://phpackages.com/badges/raoul2000-yii2-slideout-widget/health.svg)](https://phpackages.com/packages/raoul2000-yii2-slideout-widget)
```

###  Alternatives

[xmolecules/phpmolecules

Libraries to help developers express architectural abstractions in PHP code

3310.0k1](/packages/xmolecules-phpmolecules)[kuvvu/envexample

Create an update env.example with artisan

112.0k1](/packages/kuvvu-envexample)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)