Retractable side menu

Need help New Responsive Engine
1

Hi together,

I am wondering whether anybody knows about a solution for a problem I am having with sidebar menus in view of the new responsive features.

My page layout has a sticky header (full width) followed by my content space.
On the left side of the page I have a menu sidebar consisting of icons and a menu label/text.

I would like to have the labels disappear/reappear when the user clicks on a toggle.
By the same time, the content container would need to expand to the available space/width i.e. adapt to 100% (minus icon column width) of the screen.

Anybody facing similar issues? Can anybody help?

Retractable menu.001
Retractable menu.0011740×1444 180 KB

1 Like
2

Hey @jurgen.wittkopp :wave:

That’s a good question. I have seen it done a couple of ways.

I think one of the simplest ways is to just do a condition on your ‘container area’.

It could say something simple like, ‘When Menu Text is visible, left margin is ##’ Where ## is your width of the Full Side Menu.

Would that work for your situation?

3

J805, this has indeed worked, or be it with a “left padding”.

Thanks a lot. Great hint. Has saved me a lot of time.

4

There are a couple solutions described in this thread which work on hover, but adapting them to work on click should be straightforward.

5

:+1: :+1: :+1:
That’s giving me some ideas. Thanks a lot.