Introducing the ultimate sidemenu plugin for Ionic!

The Lumen Sidemenu plugin contains several styles and designs for sidemenus in Ionic. It also contains dynamically changing frosted glass background based on profile pic, giving apps a more native look when run under iOS and of course also beautiful on Android as well.

Looking for a sidemenu for Ionic 2? Try our new Lumen Sidemenu for Ionic 2.

The plugin comes with a couple of features:

• Frosted glass background based on dynamic avatar picture or custom image

• Gradient or single color background

• Large or small sidemenu profile picture element

• Several presets for selected menu items

By utilizing the features, you will be capable of designing a countless variety of sidemenu styles.

How to use on an existing project

Load dependencies

Load the sidemenu.js into your index.html file.

<script src="<yourdirectory>/sidemenu.js"></script>

Load the sidemenu module into your app.js file.

angular.module('starter', ['ionic', 'sidemenu'])

Load the sidemenu stylesheet into your index.html.


<link href="css/sidemenu.css" rel="stylesheet">

*Configure your style
*

Apply the sidemenu directives to ion-content of your sidemenu template, and choose one of the sidemenu styles you wish to apply:

sidemenu-glass-avatar: frosted glass background based on the profile picture


<ion-content sidemenu="sidemenu-glass-avatar">

sidemenu-glass: frosted glass background based on static picture


<ion-content sidemenu="sidemenu-glass">

sidemenu-gradient: sidemenu background based on a gradient effect.

<ion-content sidemenu="sidemenu-gradient">

sidemenu-fill: sidemenu background based on single color

<ion-content sidemenu="sidemenu-fill “>

sidemenu-glass: sidemenu background based on static background image


<ion-content sidemenu="sidemenu-glass “>

Choose profile avatar style

The ion-content div contains a child div which uses the profile directive. Choose your profile avatar style.

profile-small-transparant: a small profile avatar picture


<div profile=“profile-small-transparant“>

profile-large-transparant: a profile avatar picture


<div profile=“profile-large-transaprant“>

profile-small-glass: a small profile picture area with frosted glass background based on profile picture

<div profile=“profile-small-glass”>

profile-large-glass: a profile picture area with frosted glass background based on profile picture


<div profile=“profile-large-glass”>

profile-large: a large profile picture area


<div profile="profile-large">

Color combinations are done in the CSS itself.

All the images above are done with the above configurations.