How to implement a submenu in a sidemenu

#1

How would I implement a submenu in a sidemenu?

For instance; I have the basic app seed up and running and are able to open up the side menu (left, right or both).
When opening the menu, I see a list view (menu items). When I click an item in that list view, I want the list view to slide to the left and a new list view to slide in from the right, without closing the side menu. This would simulate a ‘sub menu’ effect.

But I have no idea on how to get started with this. Would I need to implement nested sidemenu directives?

Tab Layout with side menu inside one of the tabs only
Side Menu: How to put in controller in left view and update list view in side menu?
#2

Would this be similar to how nested views work in the seed project? Where on the first tab you can go to two views about scientific facts?

#3

Yes that’s the behavior I’m looking for. Except when I click a menu item now, the side menu closes and opens the new view in the ng-view directive instead of staying open and slide in an extra menu.

#4

Hmm, I got something together that could get you in the right direction. Instead of closing the menu the re-opening it again to show the updated content, you can set up a separate ion-nav-view inside the side menu then set up some nested states based off of it.

Here’s my codepen

I’m not too great with UI-Router so I’m even looking into how to do this. This could be a cool feature to figure out so I’ll work on this and if you come up with something too, let me know.

#5

It’s looking promising, code wise. But your example isn’t doing much at the moment. Awesome that you will take the time to figure this out with me.
I am fiddling around with your example but I must admit; doing this with Ionic Framework is quite the challenge.

Let’s keep each other posted here :sweat_smile:

#6

Yeah it doesn’t have much too it but there are a few things that are making this complicated. I got something together but its not pretty.

#7

It’s so not-pretty that it even has an uncaught error causing the app to do nothing :wink:

#8

Error? I’m not getting an error on my end but yes, it does need work. I’ll keep messing around and see if this can be refined.

#9

My bad. No error. I guess it was just my browser (read: me) being ignorant.

That’s looking awesome! Exactly like I meant it. Now all we need to do is implement a list view which opens a list view which triggers the sidemenu to close and open a new main view.

Much appreciated @mhartington! You should be part of the Ionic team :wink: (If you aren’t already)

#10

No problem, glad to be able to help.
I think the issue with it not work was because during dev, I like to turn off auto run js on codepen (forgot to turn it back on when I posted!)

I’m still going to work on this because there are url dependencies that I want to see if I can get around. This way the sub-menus can be navigated with ui-sref and not a fixed url.

Thanks for the comment, I’m not part of the team, but I would like to be…

#11

Any progress on this one? In the meanwhile I’ve learned a lot about nested views with ui-router.

#12

Nothing yet, I’m going to work on it tonight, so keep an eye out for a demo. Glad to hear you’re learning a lot though!

#13

Awesome! Learning a lot is quite an understatement. A week ago, I never did anything with Ionic, AngularJS, Bower, Grunt or Yeoman.

Today, I’m rocking all these tools like I’ve never done anything else. Especially once you get your head around the magic of nested views / routes, things become pretty interesting!

What time do you have it there? As a reference for me what you mean by ‘tonight’. I live in the GMT -4:00 timezone (Curaçao).

#14

I’m on the east coast of the U.S., so -5:00 i believe. I’ll post it as a full demo if I’m successful

#15

Hey @Robin, so as of now, I wasn’t able to get the sub menu to work right with out the urls. The entire system get confused because of the $urlRouterProvider.otherwise setting when you define your states.

Because the nested states don’t have a url associated with them, the $urlRouterProvider.otherwise setting will kick in and send me back to my first defined state.

Unless there is a way to define the url in the states param as null or have it just inherit a url from the parent, then it could work, maybe… ?

#16

Well as for my implementation I don’t care if the URL updates. Actually, I prefer the URL being updated.

  • This is my use case, maybe it helps

For example, I defined a state like this (it’s url):

/partners/:partnerType/:viewType/country/:countryId/category/:categoryId/partner/:partnerId

:partnerType is either a ‘Save’ or a ‘Redeem’ partner
:viewType is either ‘Map’ or ‘List’ (you can view partners on a map or in a list view)

Menu opens in ‘country list view’
:countryId is the user selected country (the first option in this ‘sub menu structure’

When country is selected, list view slides to ‘Select category view’
:categoryId is the category a user chose. It’s either ‘all’ for all categories or an actual ID to filter on that category

When ‘All’ is selected in category view, the menu closes and the Map / List view is updated according to the new data set in the parameters

When a specific category is chosen, the category list view slides to ‘Select partner list view’ where a list of partners is shown
This is just like the categories; select ‘All’ for all partners or select a specific partner. In both cases, this is the final view in this submenu so with ‘All’ or a specific partner, the menu will close and the Map / List view will update accordingly.

Hope this helps. If you made any progress in a CodePen snippet, please share and we could work together on it.

I don’t like being the guy who ‘orders’ stuff and doesn’t help with his own problem :wink:

Again, all your effort is much appreciated.

#17

I tried this http://codepen.io/mhartington/pen/xgfsa with Chrome but SubMenu don’t work.

#18

I got it “work” but its really hacky in my opinion.

http://codepen.io/mhartington/debug/CvnxL#/tab/home

I’m disabling the $urlRouterProvider.otherwise so I have to provide the url to the debug page but heres the actual pen

I’m still to get things worked out but I just haven’t had a chance to work on it today. But I figure the more people that we can get to help on this, the better chance we can find a solution.

#19

Awesome work @mhartington but it seems like I have a blank page on both URL’s. Is it something on my side?

Code looks awesome but has a hacky taste indeed. As soon as I figure out some other issues with this project on my side, I’ll take a look at your Pen and throw in my two cents.

#20

I see white a white page as Robin.