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!
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
Carlos Fontecha
1,211 PointsHow 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
45,783 PointsCarlos,
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
Sean T. Unwin
28,688 PointsThere 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. :-)
Erik McClintock
45,783 PointsErik McClintock
45,783 PointsWhile 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