I have a problem with the side menu.
It works like expected
- in the chrome browser on windows
- in the firefox brwoser on windows
- in the ionic lab android emulator
- in the ionic lab windows emulator
- in the ionic view app on android
- in the chrome browser on android
The menu wont slide in
- in the ionic lab ios emulator
- in the ionic view app on ios
- in safari browser on ios
- in chrome browser on ios
Any idear what is going on. You can check it under
Here is my simple code:
HTML
<ion-header>
<ion-navbar color="weeklystyle">
<button ion-button menuToggle>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
WeeklyStyle
</ion-title>
</ion-navbar>
</ion-header>
<ion-menu [content]="mycontent">
<ion-content class="menu-gradient">
<div class="spacer" style="width: 254px; height: 20px;"></div>
<div class="category-image">
<img src="assets/img/weeklyStyle/category.png" style="display: block; width: 60%; height: auto; margin-left: auto; margin-right: auto;">
</div>
<h3 id="menu-heading1" style="color: rgb(255, 255, 255); font-weight: 400; text-align: center;">{{categoryString}}</h3>
<div class="spacer" style="width: 254px; height: 20px;"></div>
<ion-list>
<button ion-item (click)="goToPageEvents()" class="menu-item" menu-close="" active-page-highlight="">
Events
</button>
<button ion-item (click)="goToPageImpressum()" class="menu-item" menu-close="" active-page-highlight="">
Impressum
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" #mycontent [root]="rootPage"></ion-nav>
<ion-content padding>
</ion-content>
CSS
page-home {
$MENU_TOP: #dd3333;
$MENU_BOTTOM: #dd3333; //#ff9068
$MENU_TRANSPARENCY: rgba(255,255,255,0.4);
.menu-item{
background:none;
color:white;
font-weight:300;
border:0px;
.item-content{
background:none;
&.activated{
background: $MENU_TRANSPARENCY;
}
}
&.active-page-highlight{
.item-content{
background: $MENU_TRANSPARENCY;
}
}
}
.menu-gradient{
background: -webkit-linear-gradient(left top, $MENU_TOP, $MENU_BOTTOM);
background: -o-linear-gradient(bottom right, $MENU_TOP, $MENU_BOTTOM);
background: -moz-linear-gradient(bottom right, $MENU_TOP, $MENU_BOTTOM);
background: linear-gradient(to bottom right, $MENU_TOP, $MENU_BOTTOM);
}
.category-image{
img{
border-radius:50%;
margin:10px;
border: 4px solid $MENU_TRANSPARENCY;
-webkit-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
}
}
}