Create a css class to current menu

1

Hi, I have the following code that I use to create a side menu with various options that will work as tabs. I wonder if you can create a css class or simply like to indicate the active menu item with a bold or similar.

<ion-side-menu>
  <ion-header-bar class="bar bar-header bar-positive">
    <h1 class="title"><i class="icon ion-planet" style="font-size: 1.05em"></i> App</h1>
  </ion-header-bar>
  <ion-content class="content-light">
    <div class="list item-text-wrap">
      <a href="#/tabs/home" class="item" menu-close>
        <span translate="menu_txt1">Home</span>
      </a>
      <a href="#/tabs/farm" class="item" menu-close>
        <span translate="menu_txt3">Option a</span>
      </a>
      <a href="#/tabs/improve" class="item" menu-close>
        <span translate="menu_txt4">Option b</span>
      </a>
      <a href="#/tabs/improve" class="item" menu-close>
        <span translate="menu_txt7">Result</span>
      </a>
    </div>
    <div class="list item-text-wrap list-uppercase">
      <a href="#/tabs/units" class="item" menu-close>
        <i class="icon ion-settings"></i><span translate="menu_txt2">Units</span>
      </a>
      <a href="#/tabs/help" class="item" menu-close>
        <i class="icon ion-help"></i>
        <span translate="menu_txt5">Help</span>
      </a>
      <a href="mailto:mail@domain.com" target="_blank" class="item" menu-close>
        <i class="icon ion-paper-airplane"></i><span translate="menu_txt6">Contact</span>
      </a>
    </div>
  </ion-content>
</ion-side-menu>

Thank you!

2

This is a solution that works on me.

You need to assign each menu an ng-class=“uniqueIdentifier” and ng-click=“function(path)” instead of href

  <a ng-click="GoTo('/tabs/home')" ng-class="Home" menu-close>
    <span translate="menu_txt1">Home</span>
  </a>
  <a ng-click="GoTo('/tabs/farm')" ng-class="Option" menu-close>
    <span translate="menu_txt3">Option a</span>
  </a>

And on your main controller you will have the function

this.Goto = function( path ) {

// Initialize each menu identifier class
$scope.Home = 'item ';
$scope.Option = 'item ';
.....
if ( path == '/tabs/home' ) {
$scope.Home += ' active';
} else if ( path == '/tabs/farm' ) {
$scope.Option += ' active'; 
}
.......
$location.path( path );

}

Also you need to initiate each menu class for the first run outside the function.

3

Thanks Leiron !, I’ll try

4

After your code, simplifying it a bit and with a little google, I managed to make it work:

<ion-content ng-controller="MainmenuCtrl">
	<ul class="list item-text-wrap">
    <li ng-class="{active : isActive('/tabs/home')}">
      <a ng-href="#/tabs/home" class="item" menu-close>
        <span translate="menu_txt1">Home</span>
      </a>
    </li>
    <li ng-class="{active : isActive('/tabs/farm')}">
      <a ng-href="#/tabs/farm" class="item" menu-close>
        <span translate="menu_txt3">Farm</span>
      </a>
    </li>
    .....
  </ul>
</ion-content>

// Controller
function MainmenuCtrl($scope,$location) {
  $scope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
  };
}

/* Active, active with span text and with icons */
.active, .active span, .active i {
  font-weight: bold;
  color: #4A87EE!important;
}

Thank for the help!