Making a new web site. What is a good responsive menu system?

Hiya all!

I need to make a new web site.

What’s a good responsive menu system for these days?

I have seen a lot of people using a 3 line icon that when you tap it, opens a menu on smart phones. Is that the best route?

Have an alternative?

Also, Have a recent link / recent tutorial on how to make one of those?

Thanks ahead,

-Line

The “hamburger” icon has become sort of a UX standard these days. Nearly anyone who uses your site/app will intuitively know what that does. So I think that is the best route to take.

If you haven’t done any groundwork, you can use bootstrap menu/nav. If you’re wanting to stay away from bootstrap (which is understandable) there are plenty of hamburger menu tutorials out there- even pure CSS ones.

Here’s an example: https://codepen.io/erikterwan/pen/EVzeRP
(Not mine, just one I found)

Here’s a W3 link with a responsive nav to menu example: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

The hamburger icon, like Obsidian said, has become the standard for mobile sizes since it reduces the navigation menu on small displays to a more manageable, separate slide-in. For desktop sizes on a responsive site, however, it’s still more common to use a more traditional configuration of main categories with drop-downs.

I’ve started to see more and more desktop-size designs use the hamburger icon as well, but in my opinion, it typically just hides the navigation menu for aesthetic’s sake at the expense of some usability.

Hi Obsidian,

Thanks a lot for the hamburger codepen and the w3link. Yeah,I don’t mind using bootstrap as it is pretty standard… but I do like knowing how to do it myself or to add some things that may be more difficult than I know how to do via a code snippet. Bootstrap is great, just a lot of bloat if you don’t utilize all of it.

-Line

Thanks Just-B :smiley:
-Line

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook