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

Design

andrewjc
andrewjc
22,185 Points
Posted by andrewjc
andrewjc
22,185 Points

Custom Drop Down Nav Bars

Just curious about how one would customize the nav bar to have a drop down menu, and then continue on to customize the drop down bar?

I'm assuming it would have to do with jQueries/javaScript, along with HTML and CSS of course - but I haven't actually been shown how to do it and wouldn't mind learning it.

So far I know that the drop down would be list items from my knowledge for the HTML side and of course styling it can be done via CSS, but is there a jQuery plug-in that anyone knows of that is good to use? Or am I just completely off on how to create this?

Please let me know, any help would be greatly appreciated!

Thank you

Christopher Whalen
Christopher Whalen
3,120 Points
Christopher Whalen
Christopher Whalen
3,120 Points

I've used <a href="http://users.tpg.com.au/j_birch/plugins/superfish/">superfish</a> for my site, and it works very nicely.

3 Answers

Mike Morales
Mike Morales
19,833 Points
Mike Morales
Mike Morales
19,833 Points

Andrew, I'm not sure if this is what you are looking for but here is a link, I found. Dropdown Menu

andrewjc
andrewjc
22,185 Points
andrewjc
andrewjc
22,185 Points

Thank you Mike! That was a great walk through thanks for the link :-)!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

A dropdown menu can be made in using CSS just show the menu on hover, you then just add in some CSS transitions and you are all set.

Here's the tutorial I learned from: http://www.gethifi.com/blog/nicer-navigation-with-css-transitions

Here's what I made: http://codepen.io/jamesbarnett/full/oHraG

andrewjc
andrewjc
22,185 Points
andrewjc
andrewjc
22,185 Points

Thank you James the tutorial was very helpful, Much appreciated!

Christopher Whalen
Christopher Whalen
3,120 Points
Christopher Whalen
Christopher Whalen
3,120 Points

I forgot to include the link in my first post. http://users.tpg.com.au/j_birch/plugins/superfish/ Pretty much everything is cut and paste, the only real work involved is customizing the css.

andrewjc
andrewjc
22,185 Points
andrewjc
andrewjc
22,185 Points

Awesome, thank you for the link Christopher!