how to make a sidebar menu that opens when the mouse is over ?

Targets Web
1

Hi folks.
I want to make a sidebar menu (like the one in Metro here : https://github.com/codesurge-xyz/xojo-metro) - it is a webcontainer
but with only the left pictures visible, and that expands the right text when the mouse is over.
I tried to set the width of the sidebar to 56 at open event, and change it to 250 at mouseenter, and reset it to 56 when mouseexit.
it kinda works, but has a lag of tens of seconds !

is there a “simple” javascript way to do this in a xojo web app ? or any other way ?
thanks.

2

I used the animator control for that, a long time ago. I simply animated the position or width of a container control, if I recall correctly. I used the mouse enter and exit events to run the animator.

3

I can find a number of drawer libraries with Google. I don’t have a recommendation on “simplest” because I don’t find them to be a great user experience (I would argue hiding information makes it less discoverable). As a side note, two apps I regularly use, Dynadot and CentOS Web Panel make use of persistent sidebars. It may be that the collapsible phase has thankfully passed.

I am however able to implement a library you may find. I can’t say it would be any more cost effective than Sidebar from GraffitSuite to get a professional custom implementation, but it’s available should you like some assistance. More information

4

Javier made this tutorial, it’s in Spanish but you can follow along.

5

Hmmm how about actually providing the link? :stuck_out_tongue:

Here