JavaScript and Hamburger Menus

A couple of weeks ago, I came across a tweet encouraging users to turn off JavaScript on iOS Safari to browse the web on mobile devices. Until I read that tweet, I didn’t know that I could disable JavaScript on my iPhone. I didn’t use Safari much on my phone unless I tapped on a link in email, which would bring up Apple’s default browser. I used mostly Chrome for my own convenience. My bookmarks, histories, and passwords were all synced and managed by Chrome. I tried to deactivate JavaScript on Chrome on my iPhone as well, but I couldn’t find a way to do it.

In the past few weeks, I have been browsing the web using Safari on my phone with JavaScript turned off and it has been such a pleasurable experience. Sites, particularly news, loaded much faster and without annoying ads popping up. On some photo-heavy sites, images didn’t even load without JavaScript. I actually preferred more white space than images. Hero sliders didn’t work. I just saw all the slides stacking on top of each other.

The biggest issue I ran into was the hamburger menus. Without JavaScript, these menus simply didn’t work and I could not go beyond the homepage. Everything hidden under the three horizon lines was inaccessible. We should move away from using JavaScript for hamburger menus or avoid sweeping everything under hamburger menus for the sake of convenience. I have seen sites that used the hamburger menu for just one or two items like “about” and “contact.” For longer navigation, we can use CSS grids, flex boxes, and variable fonts to control the items. A variable font with the width axis can be useful for menu items. Its narrow width can save some space on small mobile devices. It can get wider for larger screens.

For sites with tons of menu items, I don’t know what the solution is. I implemented the anchor-link technique for the Scalia Law School website years ago. Basically, I placed the menu items in the footer for mobile devices and positioned it to the top with CSS for larger screens. It still works fine without JavaScript.

Sequenz by Kilotype

Advertise here ↑