Active List Items from a Side Menu

ionic-v1
1

Similar to how tabs have an active class depending on if they are active or not, is this possible to do when using the side menus?

So my content pane has nav-view which will populate the data associated with the links from the side-menu.

I did some digging with the dev tools and saw that there is no active class being applied to the links in my menu, but there should be.

Has anyone accomplished this before or know of how to go about implementing this? Seems like this should be a built in feature to the side menu in my opinion.

       <side-menus>
          <!-- Center content -->
          <pane side-menu-content>
               <nav-view name="content"></nav-view>
          </pane>
        
          <!-- Left menu -->
          <side-menu side="left">
          <list>
              <item ng-repeat="item in items"></items>
          </side-menu>
        
          
        </side-menus>
2 Likes
2

Maybe it shouldn’t be as complicated as this but, you could use a directive on each side menu item. Then a controller/service to keep only one active at a time.

See this. Fascinating read but very complex. It’s how the Angular-UI folks manage to keep only one tab or dropdown open at a time:

3

@Calendee seems like a point in the right direction. I’m going to try to see what I can come up with and I’ll report back

4

@mhartington Couldn’t you just do this:

<side-menu side="left" ng-controller="LeftMenuCtrl">
  <list>
    <item ng-repeat="item in items" 
             ng-class="{active: isItemActive(item)}"
             ng-href="{{item.href}}">
      {{item.name}}
    </item>
  </list>
</side-menu>

app.controller('LeftMenuCtrl', function($scope, $location) {
  $scope.isItemActive = function(item) {
    return $location.path().indexOf(item.href) > -1;
  };
});

This is just an example where each list item goes to a certain href - you could use this pattern for almost anything though :slight_smile:

1 Like
5

Nice Andy. I’m so glad you joined the Drifty team. It was great before but with another great mind in the mix (and more manpower), Ionic is really going to take off.

1 Like
6

Thanks @Calendee! I’m loving it so far - and the community is awesome too!

7

@andy, sorry for no responding right away, had a few other things that required my attention before this. I went to implement this but where I’m running into trouble is with the href attribute. In you’re example, your href is defined somewhere in the model.

But in my case, I’m making my href by passing in other attribute in the model.

ng-href="#/master/{{item.name}}/{{item.detail}}
1 Like
8

@mharington that should work fine.

9

So I guess it was much simpler that I thought. I changed my links to use UI-Routers ui-sref instead of just ng-href. This lets you watch for which link is clicked based out the states the parameters you pass to it.

 <div class="list" ng-controller="IndexCtrl">

	<a  ui-sref="main.detail({petsId: pet.id })"
            ui-sref-active="active" 
            ng-repeat="pet in pets" 
            class="item button-clear" >

		<p>{{pet.title}}</p>

	</a>

</div>

ui-sref-active lets you apply any class to a link as long as you are using ui-sref.

10

I use ui-sref-active in ion-side-menus. When page loaded current item has active class, but when i select other item active class dissapears.

 <ion-content class="has-header">
  <ul class="list">
    <a ui-sref="main.filters" ui-sref-active="active" class="item">Filters1</a>
    <a ui-sref="main.filters2" ui-sref-active="active" class="item">Filters2</a>
  </ul>
</ion-content>
1 Like
11

I’ve been getting this too. I opened an issue for it so please feel free to add to it.

12

To get around this issue i created my own class current. By checking the code, I found that active class is getting added to active elements and then its getting removed. Why they don’t use pseudo-class active?

13

We’re working on this.

14

I see the ui-sref-active working ok but if you use an ion-item the background with a darken 10% is not applied because the link inside has a background too, set to the specific color.

 <ion-list >
     <ion-item menu-close class="item-positive"
                      ng-repeat="item in vm.menuItems"
                      ui-sref-active="active"
                      ui-sref="{{ item.state }}">
                {{ item.title }}
         <div class="item-icon-right">
             <i class="icon ion-ios-arrow-right"></i>
         </div>
     </ion-item>
 </ion-list>

To solve this I overwrote:

.item.active {
    &.item-positive > a {
        @include item-active-style($item-positive-active-bg, $item-positive-active-border);
   }   
}
15

Thanks Andy for sharing