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
Clifford Gagliardo
Courses Plus Student 15,069 PointsDropdown vs. "Hamburger"
Is it a style decision to go with a dropdown menu or a "hamburger" menu? Can the latter be scripted in JS or can it be done solely in CSS? If both, why choose one method over the other?
2 Answers
Jennifer Nordell
Treehouse TeacherHi there! First, yes, I think it's mostly a style decision but it also depends a bit on the device you're targeting. Remember that a dropdown menu might look a bit nicer for people on larger computer screens but fairly unreasonable on an iPhone. I'm talking here about a navigation that has several links at the top. When targeting a smaller device, a hamburger menu is likely the way to go.
As for CSS vs JS, you can do it with either. I found this codepen that has a fairly nice one done only in CSS https://codepen.io/erikterwan/pen/EVzeRP. The reason to do it in only CSS would be to ensure that even browsers without JavaScript enabled would have the same user experience as one with JavaScript enabled (at least as far as the menu is concerned). Ideally, you'd like the base functions of your site and overall experience to be as consistent as possible for both cases. Some things require JavaScript, but this isn't necessarily one of them.
Hope this helps!
edited for additional information
Keep in mind though that while you could do the CSS animations and whatnot in CSS, there might come a time when you need the contents of that list to be changed with JavaScript. For instance, a user of a site might get some links while an admin of a site or "Pro" user might get another set.
Clifford Gagliardo
Courses Plus Student 15,069 PointsThank you! You help make Treehouse an excellent experience for those trying to learn new skills which sometimes are quite daunting!
Clifford Gagliardo
Courses Plus Student 15,069 PointsClifford Gagliardo
Courses Plus Student 15,069 PointsThank you for response and for the link! I have been struggling with this. I feel like if you can do as much as possible with out JS the better. Does the dev community tend to feel the same?
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherI can't speak for the entire dev community, obviously. However, there are a couple of principles that we're taught that embrace the idea of both making the core content of the site as accessible to all as possible and implementing JavaScript in a way that doesn't hinder the user. Ideally, the basic content of the site should be accessible to anyone with even a moderately supported browser.
I would suggest you take a look at:
Progressive enhancement
and
Unobtrusive JavaScript
Ideally, you only want your JS to add additional things to your end experience and never hinder things that should be there regardless. In my opinion, a JS hamburger menu that only appears when JS is enabled is not ideal when a similar thing can be accomplished with CSS. But that's my two cents