The Ionic side menu template one of my favorite templates to work with, having said that i absolutely hate the white background of the side menu in sidemen template. So here is a way to change the appearance of your side menu.

We will need to add a class “custom” to the ion-content tag in the www/templates/menu.html

menu.html <ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="bar-assertive"> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> </button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="menuContent"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-stable"> <h1 class="title">Left</h1> </ion-header-bar> <ion-content class="custom"> <ion-list> <ion-item menu-close ng-click="login()"> Login </ion-item> <ion-item menu-close href="#/app/search"> Search </ion-item> <ion-item menu-close href="#/app/browse"> Browse </ion-item> <ion-item menu-close href="#/app/playlists"> Playlists </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 < ion - side - menus enable - menu - with - back - views = "false" > < ion - side - menu - content > < ion - nav - bar class = "bar-assertive" > < ion - nav - back - button > < / ion - nav - back - button > < ion - nav - buttons side = "left" > < button class = "button button-icon button-clear ion-navicon" menu - toggle = "left" > < / button > < / ion - nav - buttons > < / ion - nav - bar > < ion - nav - view name = "menuContent" > < / ion - nav - view > < / ion - side - menu - content > < ion - side - menu side = "left" > < ion - header - bar class = "bar-stable" > < h1 class = "title" > Left < / h1 > < / ion - header - bar > < ion - content class = "custom" > < ion - list > < ion - item menu - close ng - click = "login()" > Login < / ion - item > < ion - item menu - close href = "#/app/search" > Search < / ion - item > < ion - item menu - close href = "#/app/browse" > Browse < / ion - item > < ion - item menu - close href = "#/app/playlists" > Playlists < / ion - item > < / ion - list > < / ion - content > < / ion - side - menu > < / ion - side - menus >

Notice that my ion-header-bar has a class of bar-assertive as well.

We can add our custom menu styles to the www/css/style.css which will override the default styles.

style.css /*custom is class added to ion-content*/ .custom { background-color: #3f4041 !important; /* This sets the background color*/ } /*Set the background to transparent for ion-item*/ .custom .item { background-color: transparent; border:none; /*Removes all borders*/ border-top: 1px solid; /*Top Border for each menu item*/ border-bottom:2px solid; /*Bottom border for each menu item*/ border-color: #666; /*Sets colors for top and bottom border*/ color: white; /*Text color for each item*/ } /*Changes the border for the last item*/ .custom .item:last-child { border-bottom: 1px solid #666; } .custom .item-complex .item-content, .dark .item-radio .item-content { background-color: transparent; } /*Just makes the type white*/ .custom h2, .custom h3, .custom p, .custom a { color: white; /*Text color for each item, overrides the color property above*/ } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 /*custom is class added to ion-content*/ . custom { background - color : #3f4041 !important; /* This sets the background color*/ } /*Set the background to transparent for ion-item*/ . custom . item { background - color : transparent ; border : none ; /*Removes all borders*/ border - top : 1px solid ; /*Top Border for each menu item*/ border - bottom : 2px solid ; /*Bottom border for each menu item*/ border - color : #666; /*Sets colors for top and bottom border*/ color : white ; /*Text color for each item*/ } /*Changes the border for the last item*/ . custom . item : last - child { border - bottom : 1px solid #666; } . custom . item - complex . item - content , . dark . item - radio . item - content { background - color : transparent ; } /*Just makes the type white*/ . custom h2 , . custom h3 , . custom p , . custom a { color : white ; /*Text color for each item, overrides the color property above*/ }

And this is the result

Leave Me Your Questions And Feedback

Share this: WhatsApp

Facebook

Twitter

Pocket

Reddit

Email

More

Tumblr

Print





Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy