Side Menu, force :active state after item being selected?

ionic-v1
1

Hi.

So, I am doing a SideMenu with a list of items which links to specific content of the app.
But every time the menu closes, it resets the :active state. So when opening the SideMenu again,
the specific item (button) is not with his :active state custom class (that i´ve created).

Is there a way to force the :activated state to stay on, until the user select another item?
An example of this behavior is what the YouTube iOS app is doing with their side menu.

Thanks for the help.

2

If you are using ui-sref you can use ui-sref-active, example codepen: http://codepen.io/brandyshea/pen/QwYRVZ

3

Hi @brandyshea

Thanks for the reply and codepen example.

Well, i am not using the ui-sref directive, but I just made a test and its working.
The only problem now is, it has complete broken the Side Menu styling.
I am using the card class for each ion-item, so which classes are ui-sref using for style?

4

What do you mean by broken? ui-sref-active is adding the active class when the current state is equal to ui-sref's value.

The active class is adding the following css, this is the same css as when you are clicking down on an item:

border-color: #ccc;
background-color: #D9D9D9;

Codepen using cards: http://codepen.io/brandyshea/pen/myaEeQ

5

Sorry, my bad.
I miss a typo in the code - ui-href !
All good now.

Thanks for the tip!

1 Like