raven-slide-menu

Raven Slide Menu for Angular

An Angular component for making menus that slide in from one of the four sides of the browser.

Features

• Fully stylable with CSS
• Menu can remain visible on small/large viewports (controlled by media query)
• Menu can push or overlay content

Installation

Install into your Angular project using NPM.

npm install raven-slide-menu --save

Import the SlideMenuModule into your module.

import { SlideMenuModule } from 'raven-slide-menu';

@NgModule({
  imports: [
    SlideMenuModule,
    // ...
  ],
  // ...
})
export class AppModule { }

Usage

Add a <raven-slide-menu> element to your template, and add menu content inside it.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <raven-slide-menu [(open)]="isOpened">
      <!-- Content to appear in menu -->
    </raven-slide-menu>
  `,
  styles: []
})
export class AppComponent { }

Options

Option	Type	Description	Default Value
open	boolean	Whether the menu is open or closed.	false
position	string	Set to "top", "right", "bottom" or "left".	"left"
pushContainer	string	A CSS selector for an element that will be "pushed" by the menu.	""
pushPercent	number	The percentage amount an element will be "pushed" by the menu.	100
deactivateQuery	string	A CSS query that when matched will deactivate the slide menu.	""

FAQ

Why is the pushContainer not being pushed?

The element used as the push container needs to use relative or absolute positioning. It also needs to have its transition properties set appropriately. Because the push container exists outside of the component, and we don't want to risk overriding your styles, we leave it to you to apply the following styles.

.rsm-push-container {
  position: relative;
  transition-property: top, right, bottom, left;
  transition-timing-function: ease-out;
  transition-duration: 200ms;
}

Can I remove or customize the hamburger menu button?

Yes, you can hide or style the button using CSS.

.rsm-button-wrapper {
  display: none;
}

If you hide the button, you can create your own, fully customizable button anywhere you like. Just set your custom button's (click) handler so that it opens/closes the menu and stops the event from propagating.

<button (click)="toggleMenu($event)">Toggle Menu</button>

toggleMenu(e) {
  this.isOpened = !this.isOpened;
  e.stopPropagation();
}

How can I reset the menu when it has dynamic content?

If the content inside the menu changes, it can affect the calculations that determine how it is positioned, causing it to be partly visible when it should be closed.

To fix this, close the menu after the content changes are complete. For example:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <raven-slide-menu #slideMenu [(open)]="isOpened">
      <div>{{ someDynamicContent }}</div>
    </raven-slide-menu>
  `,
  styles: []
})
export class AppComponent {
  @ViewChild('slideMenu')
  slideMenu: SlideMenuComponent;

  someFuncThatUpdatesContent() {
    // Update content in menu
    // ...

    // Reset menu
    setTimeout(() => this.slideMenu.closeMenuWithoutTransition());
  }
}

Development

To contribute to the development of this component, clone its repository and run npm install. Then run ng serve -o to start a development server and to open a sample page in your browser.

License.

MIT license.