Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Carlos Fontecha
Carlos Fontecha
1,211 Points

How to create a drop-up menu on click?

How could I make a drop-up menu on which I click instead of hover? I'm trying to make one similar to the mobile version of this site: http://www.alicetai.com/

2 Answers

Erik McClintock
Erik McClintock
45,783 Points

Carlos,

You can use a scripting language like JavaScript (and/or use the jQuery library for even simpler implementation) to achieve this rather simply.

You'll want to have your menu created and its 'display' set to 'none', and then bind an event listener to your target element (your button or link or whatever you want people to click) that watches for the click event, which you'll use to trigger a function to toggle the display value of your menu from 'none' to 'block' and vice-versa.

Take a look here for a little more information on adding event listeners:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Hope this helps get you started!

Erik

Erik McClintock
Erik McClintock
45,783 Points

While I suggest looking into the pure JavaScript way of implementing this first, jQuery does provide much simpler means of achieving the same thing and with a little less code required to make the transition pretty and smooth.

http://api.jquery.com/category/effects/sliding/

Erik

Sean T. Unwin
Sean T. Unwin
28,690 Points

There are some options available to do that - https://stackoverflow.com/questions/18786546/creating-drop-down-menu-on-click-css

Read all the responses and see which may work best for you.

Good luck. :-)