Need help with mobile navigation effect

[bobla]

The HTML of a navigation menu is usually a collection of nested ULs and LIs.

The mobile navigation for target.com has it where you click on a subsite (a nested set of ULs) and it displays slides in a fresh view of that child UL so that it covers over the menu display. You end up only seeing that particular subsite’s menu. If you want to go back to the parent, there is a button that leads you back and it refreshes the entire menu.

I’m noticing that they’re using React in order to accomplish this, what would be the best approach using jQuery and CSS?

One method I was thinking about was to have js toggle display none to all other ULs and LIs so that the one that was clicked and its child UL is the only one that displays. Once the back button is pressed, it goes back to the previous state.

Is there a better way to do this? I especially like the effect where it slides in from the left.

Thanks!

[Beverleyh]

The approach I’d take (which is probably what you’ll find a lot of when you research similar menus/tutorials online) is;
– toggle the addition or removal of a class with JS
– define a slide transition via the class with CSS

You can’t transition between display:none; and other values in CSS, but I’m not sure how jQuery handles things with its horizontal reveal methods. From memory, it’s vertical slideDown method does it by calculating lots of incremental inline styles to change the height on the fly, so I image that the horizontal slide animations do something similar with width.

[bobla]

Thanks for that info. Yes that’s the other approach I was thinking about as well. Any ideas on how to get the subsite reveals to take over the whole menu?

[Beverleyh]

Absolute positioning, so each sub-menu occupies the same space? But have a look at some online example for more ideas and take your cues from there.

[stelsiva]

This is absolutely positioning. Yes that’s the other approach I was thinking about as well. rom memory, it’s vertical slideDown method does it by calculating lots of incremental inline styles to change the height on the fly, so I image that the horizontal slide animations do something similar with width.

[Author]

Posts