Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

Thanks much is appreciated

2 Answers

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