List: Size of item, pointer "hand" below closed list, color of each item

Questions
1
  • If I select a monster, I had thought the text "Select monster:" would change to the selected monster. How can I achive this?
  • How can I set the with and height of the items?
  • Below the closed list the mouse cursor is instead of a pointer a hand. How can I prevent this?
  • How can I define the background color of each item?
let data = {
	"Select monster:":["Ghost", "Ghoul", "Vampire", "Werewolf", "Skeleton1", "Skeleton2", "Skeleton3", "Skeleton4"]
}

let pulldown = new List({
	list: {menu:data},
	pulldown: true,
	pulldownToggle: true,
});
2

In the middle of things right now... but here are some examples that may or may not help. We did our best at the List and Pulldown treatment, but it was quite tricky to code. We may not have gotten every feature quite right - or as expected. And there are lots of options.

https://codepen.io/zimjs/pen/zYzVXNd

https://codepen.io/zimjs/pen/ydaPer

https://zimjs.com/ten/accordion.html

3

Your options are overwhelming and fantastic. I believe you without hesitation that the programming was very tricky.

Regarding my motivation: I've created many technical simulations using TypeScript/jQuery in combination with createjs, threejs, and HTML5. In HTML5, I built all the controls such as buttons, sliders, checkboxes, dropdown menus, etc.

I'm now considering modernizing the simulations and, for example, removing jQuery. In this context, I thought I could possibly replace the controls with Canvas. Since I absolutely need Adobe Animate with createjs, I came across your ZIM. But I'm realizing that replacing the controls with Canvas isn't so trivial.

There's no pressure on me, and I'll continue to follow your excellent ZIM.