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

Web Design
#1

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

#2

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

#3

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.

#4

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

#5

Thanks Just-B :smiley:
-Line