How do I create a dropdown menu in kineticjs

Question

I am trying to create a diagram editor using Kineticjs.

Currently, I want to create a drop down menu with a scrollbar as in a select box. However, I am not sure of how to do that in Kineticjs. Can someone give some advice as to the logic of the implementation of drop down menu in Kineticjs?

An example of what I want to create

Thank you very much in advance.

Warmest Regards, Dandy Ling

Answer 1

You could just use the Layer and Group collections to logically create your Dropdown Box.

Adding the "mouseover/mouseout" events, you could just show/hide the groups within the Layer.

Then to make it really nice, you could use the Tween/Animation classes to animate the x/y position of each of the options.

Then you just need to hook-up the "click/touchdown" events to methods that call you core logic.