https://github.com/developerdizzle/bootstrap.push-menu

Enables push menu functionality with Bootstrap-compliant classes
https://github.com/developerdizzle/bootstrap.push-menu

Last synced: 3 months ago
JSON representation

Enables push menu functionality with Bootstrap-compliant classes

• Host: GitHub
• URL: https://github.com/developerdizzle/bootstrap.push-menu
• Owner: developerdizzle
• License: mit
• Created: 2015-02-19T19:47:48.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2016-02-26T15:27:39.000Z (about 10 years ago)
• Last Synced: 2025-02-19T04:11:16.238Z (about 1 year ago)
• Language: HTML
• Size: 629 KB
• Stars: 22
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# bootstrap.push-menu

Enables push menu functionality with Bootstrap-compliant markup and CSS.  Only takes effect at mobile resolution.

[Check out the demo here](http://developerdizzle.github.io/bootstrap.push-menu/demo.html)

![demo](http://i.imgur.com/YO4dO6A.gif)

## Installation

You can use Bower to install bootstrap.push-menu:

```console

$ bower install bootstrap.push-menu

```

## Configuration

Add the CSS file:

```html

```

and JS file:

```html

```

Then minimally add the `data-toggle="push"` and `data-target` attributes to your `navbar-toggle` button:

```html

      

        


          


            

              Toggle navigation

              

              

              

            

            Project name

          

          


            


              
Home

              
About

              ...

```


For standard Bootstrap setups, `data-toggle="push"` replaces `data-toggle="collapse"` and `data-target` remains the same.  You will also want to replace the `collapsed` class from the `navbar-toggle` button with `visible-xs`, as well as remove the `navbar-collapse` and `collapse` classes from the target `#navbar`, because we are essentially replacing the collapse functionality with push.

The javascript will automatically add a few classes to your navigation elements.

## Options

These options can be placed on the button that toggles the push:

`data-target` is the selector for the navigation bar.  Defaults to `#navbar`.

`data-canvas` is the selector for the element that will be pushed.  This defaults to `body` and is almost always what you want.

`data-direction` is the direction that the canvas element and menu will slide.  Defaults to `left`.  **Note:** `right` does not work in standard Bootstrap navbar, as the navbar-toggle button will be on the right (and pushing it further right will place it off-screen).