Ionic Creator

Beautiful Side Menus

In this Weekly Workshop, we dive in and create an awesome looking Side Menu with a little custom Styling & SCSS love. ❤️

You'll be able to take the styling concepts you learn in this video, and apply them throughout all of your Creator projects!

 

Here's the final code from the end of the video:

$SIDEMENU_TOP: #ff4b1f;
$SIDEMENU_BOTTOM: #ff9068;
$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4);

.side-menu-item{
    background:none;
    color:white;
    font-weight:300;
    border:0px;
    .item-content{
        background:none;
        &.activated{
            background: $SIDEMENU_TRANSPARENCY;
        }
    }
    &.active-page-highlight{
        .item-content{
            background: $SIDEMENU_TRANSPARENCY;
        }
    }
}

.side-menu-gradient{
    background: -webkit-linear-gradient(left top, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: -o-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: -moz-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: linear-gradient(to bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
}

.profile-image{
    img{
        border-radius:50%;
        margin:10px;
        border: 4px solid $SIDEMENU_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);
    }
}
angular.module('app.directives', [])

.directive('activePageHighlight', ['$rootScope', '$state', function($rootScope, $state){

   return function ($scope, $element, $attr) {
       
     function checkUISref(){
       if ($state.is($attr['uiSref'])){
             $element.addClass('active-page-highlight');
         } else {
             $element.removeClass('active-page-highlight');
         }
     }
     
     checkUISref();
       
     $rootScope.$on('$stateChangeSuccess', function(){
         checkUISref();
     })
   };

}]);

Updated about 11 hours ago


Beautiful Side Menus


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.