I want to create a drop down menu like the one in the Ubuntu-Mate Software with JavaScript

Development Discussion
,
#1

I want to create a drop down menu like the one in the Ubuntu-Mate Software. This is the idea: I am making an HTML file with checkboxes to use it as a tool to identify marketing imperfections on websites, ads, etc. I want to use it to identify shortages of marketing in companies so that I can apply as a freelance marketer to fix their mistakes.

I am making a file similar like this one:
https://stayintech.com/info/UX.
The changes I add to my file are a drop down menu under every checkbox with a short summary of why the marketing change should be done and how it should be done. And also a link to a research paper proving the effectiveness of the marketing technique.

I used this code: https://www.w3schools.com/howto/howto_js_dropdown.asp, but there are several things I don’t like. The problem is this drop down menu hides the checkboxes; I want the dropdown menu to push the check boxes down instead, like in the Ubuntu-Mate software boutique.

[Album] Imgur: The magic of the Internet

I would appreciate it if you tell me how to edit the code above so that it works as in the Software Boutique.

Thanks

#2

What you’re looking for isn’t a “drop-down menu” in its truest sense, it’s just another element that shows/hides depending on the button.

You should look into jQuery, a JavaScript library, as this is what powers the behaviour you’re looking for in the Software Boutique.

A simple example here is a hidden element that can be showed/hidden on press:

<a onclick="$('#extra-stuff').toggle()">Toggle</a>

<div id="extra-stuff">
   Your hidden menu goes here...
</div>
2 Likes
#4

So, it’s called a hidden menu. Thanks, lah7. This code will do it for me:
https://codepen.io/samiam151/pen/JdgGxw. I should look into JQuery, but I haven’t learned JScript yet, so I will definitely look into it in the future.

Best regards.