Elegant and easy solution for making responsive menus that can shift between traditional desktop and mobile hamburger menus

[M-Valentino]

What problem are you trying to solve?

Making a simple hamburger menu not only requires HTML, but requires JavaScript and a decent amount of advanced CSS, which may be too challenging for beginners in web development. This leads to websites created by beginners being hard to navigate on mobile. HTML is not user friendly as it could be in creating mobile optimized menus.

Additionally, it is clunky to maintain two versions of the same menu defined in HTML. I also believe this makes coding menus to be compatible with screen readers more challenging.

What solutions exist today?

One solution involves defining two menus, one for desktop and one for mobile, and then using @media CSS rules to show or hide the menus at different screen resolutions.

How would you solve it?

A new element called <topnav/> will be created. <topnav/> elements contain <mi/>s which is menu item for short. They will simply be text with an optional href or JavaScript event. They can be placed inside the <nav/> element.

Here is an example of how the code would look:

<nav>
    <topnav>
        <mi href="/">Home</mi>
        <mi href="/blog">Blog</mi>
        <mi href="/contact">Contact</mi>
    </topnav>
</nav>

On desktop screens, it will appear simply as text with underlines arranged in a row with some padding between the menu items. If the coder wanted the menu to be vertical, a new CSS rule can be applied to change the orientation.

On mobile screens, the menu will be aligned to the right of the screens by default and would show a typical hamburger menu icon. Potentially it could just be non-selectable text containing this character: "☰", the "Trigram for Heaven". Having the icon be text by default would allow for browser developers to easily code it into their rendering engine. since the hamburger icon could be styled to have a different color, have a shadow, etc. When the hamburger menu icon is clicked, simple white box below containing the menu items is displayed with each menu item ordered vertically.

Now here is the really interesting part. In order for the switch to happen from desktop menus to mobile hamburger menus, the browser chooses when this happens. On mobile Safari or on Chrome for Android, the browser can just choose to show the hamburger menu. No @media rules are necessary, although it would be a good idea to provide CSS options to override the default browser behavior.

This is a real simple solution. Obviously there would need to be a lot of additions to the CSS standard being made, but implementing these new elements would make HTML5 easier for beginners. I also propose that dropdown menu support should be added as well.

Anything else?

The hamburger menu is more common on websites than tables or even the obscure meter tag, so I believe there is a strong case for it being added to the HTML standard.

This idea requires a lot of consideration on how all the possible intricate behaviors would work. This is a rough idea.

[flashymittens]

Shouldn't browsers be able to extract this data from the usual nav/ul/li/a structure, provided there is a certain hint (a new attribute?) that this thing is an "app menu"?

[M-Valentino]

@flashymittens Part of the idea was to cut down on needing so many tags like <ul/>, <li/> and <a/>. When you implement an unordered list, for navigation, you end up having to use CSS to remove the bullet points, which most people don't want. Maybe the <nav/> tag could have an attribute that would turn the features of my proposal on, and <topmenu/> wouldn't be needed.