
Lumen Sidemenu
Easily create your own unique sidemenu!
$8.00
Details
- Version:
- 1.0
- Ionic:
- 1.x
- Platforms:
- iOS, Android
- Released:
- 5 years ago
- Updated:
- 4 years ago
- Category:
- Plugins
- Tags:
- ,
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.
```html
```
Load the sidemenu module into your app.js file.
javascript
angular.module('starter', ['ionic', 'sidemenu'])
Load the sidemenu stylesheet into your index.html.
javascript
<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
javascript
<ion-content sidemenu="sidemenu-glass-avatar">
sidemenu-glass
: frosted glass background based on static picture
javascript
<ion-content sidemenu="sidemenu-glass">
sidemenu-gradient
: sidemenu background based on a gradient effect.
javascript
<ion-content sidemenu="sidemenu-gradient">
sidemenu-fill
: sidemenu background based on single color
javascript
<ion-content sidemenu="sidemenu-fill “>
sidemenu-glass
: sidemenu background based on static background image
html
<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
javascript
<div profile=“profile-small-transparant“>
profile-large-transparant
: a profile avatar picture
````javascript
profile-small-glass
: a small profile picture area with frosted glass background based on profile picture
javascript
<div profile=“profile-small-glass”>
profile-large-glass
: a profile picture area with frosted glass background based on profile picture
javascript
<div profile=“profile-large-glass”>
profile-large
: a large profile picture area
````javascript
Color combinations are done in the CSS itself.
All the images above are done with the above configurations.