Javascript dropdown, which method is better?

So, w3schools website has this method of making dropdown work, which has feature that mine doesn’t. When you click outside window, opened dropdown closes.

So, I have few questions.

  1. If I don’t need that closing-without-clicking-on-button feature, is it ok to use my code? Are there any downsides to it?
  2. Aren’t there any other way of adding this feature to my code without using w3css overcoplicated 4-stories-high function?
  1. Instead of clicking outside the window your dropdown can be closed by clicking on dropdown itself…

  2. You can show dropdown only when user hover over it…
    in that way, you’ll be able to hide it when user leaves the dropdown
    area

  1. I’d say it’s okay to keep it as it is, although not ideal for 2 reasons. First, it isn’t necessarily intuitive that the same button has to be clicked to close the menu. Second, if the dropdown opens, and covers site content, you’ll want an easy way for the user to close the menu.

  2. Hover is a good idea, although hovers can be a bit of a pain for bigger menus. The w3css code isn’t exactly what you’ll need, but something like it. It may seem more complicated because it’s assuming there are multiple dropdown on the page that need to be found. If you only have 1, you won’t need a for loop.

Hover also doesn’t work at all on touchscreen devices, for obvious reasons. And even with a mouse, hover menus tend to be extremely annoying.

1 Like