How to build left nav that slides in/out onClick + portion still visible when hidden

What are some good ways to enable a sidebar to slide in/out onClick like Bubble’s (see image below)? Note, I want to include a narrow, vertical bar that continues to be visible after the sidebar is closed and I’d like to create a seamless transitions from open -> closed and closed -> open.

Seems like I might be able to use a plugin to achieve this. Possible solutions seem to use either: Move It, Tookbox + Custom JS. or perhaps CSS Tools.

Anyone have thoughts or suggestions? All ideas welcomed.



@jarrad, how would you approach this problem?

If you want a easy way out have a look at this one,

This can even be refined a heap i did this on the fly while people were checking it out.

If you do go the plugin route make sure you contract the canvas’s parent or you will have an invisable blanket over the area that the draw opens into.

You can do alot with some simple code to the default slide menu to.

Grab the css tools plugin and the plugbubble plugin and your set, unless you want it to 90 degree tumble roll into the page, expand, shiver and pop the options one after another down the list… then maybe moveit is a better suit…

1 Like