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

HTML

Posted by daniel aguilar
daniel aguilar
4,361 Points

Can anyone help me make a mobile navigation bar? that drops down the links?

Thanks much is appreciated

2 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hello, the Treehouse blog has examples of both jQuery and CSS responsive menus.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

For this, you could use HTML, CSS, and a little JavaScript (you could also use the jQuery library to make it extra simple, but that will add unnecessary bloat to your site if that's all you use it for; the pure JavaScript implementation of that functionality is rather simple in itself).

You'll want to target the mobile menu link/button from your HTML in your JavaScript/jQuery, and on hover and/or click, toggle the display property of your dropdown menu between "none" and "block" accordingly.

Here are some links to documentation to further explain the methods you would use in JavaScript and jQuery:

JavaScript:

-getElementById() - to access the HTML elements necessary (i.e. the menu button and the menu itself)

-addEventListener() - to bind an event listener to the menu button for the click event

-setAttribute() - to alter the value of the display property for your dropdown menu

jQuery:

-selecting elements in jQuery - to access the HTML elements necessary (i.e. the menu button and the menu itself)

-.click() - to bind an event listener to the menu button for the click event

-.prop() - to alter the value of the display property for your dropdown menu

-.toggleClass() - an alternative to the .prop() method, you could set a base display value of "none" on your menu, and then toggle another class on and off of your menu (say, "expanded" or "open" or whatever you want) that you've styled in your CSS to have a display value of "block"

Erik