{"id":316692,"date":"2020-07-14T07:38:10","date_gmt":"2020-07-14T14:38:10","guid":{"rendered":"https:\/\/css-tricks.com\/?p=316692"},"modified":"2020-07-14T07:38:11","modified_gmt":"2020-07-14T14:38:11","slug":"three-css-alternatives-to-javascript-navigation","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/three-css-alternatives-to-javascript-navigation\/","title":{"rendered":"Three CSS Alternatives to JavaScript Navigation"},"content":{"rendered":"\n

Hey quick! You\u2019ve gotta create the navigation for the site and you start working on the mobile behavior. What pattern do you choose? If you\u2019re like most folks, it\u2019s probably the \u201chamburger\u201d menu that, when clicked, uses a little JavaScript to expand a vertical list of navigation links.<\/p>\n\n\n\n

But that\u2019s not the only<\/em> option.<\/p>\n\n\n\n

Depending on the context and contents of the navigation, there may be a JavaScript-free method that gets the job done while providing a more accessible experience.<\/p>\n\n\n\n\n\n\n\n

It is considered best practice to use a progressive enhancement approach, building webpages for users with the oldest and least capable technology first, then introducing additional enhancements as support allows. If you can provide a quality experience for users with basic technology, then you might consider whether or not your webpage even requires JavaScript functionality at all. Leaving JavaScript out of the navigation can ensure that users are able to navigate your website even if JavaScript is disabled or network issues prevent scripts from loading \u2014 which are definitely wins.<\/p>\n\n\n\n

Let\u2019s look at three alternative patterns to the JavaScript-powered hamburger menu.<\/p>\n\n\n

Alternative 1: Put the menu on a separate page<\/h3>\n\n\n

Who said navigation has to be in the header of every page? If your front end is extremely lightweight or if you have a long list of menu items to display in your navigation, the most practical method might be to create a separate page to list them all. The lightweight WordPress theme Susty<\/a> utilizes this method for its navigation.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This pattern is especially useful for static websites that use filesystem routing. If the project is built using a static site generator, the page load might be imperceptible to the user and have the added benefit of keeping your templates as modular as possible.<\/p>\n\n\n\n

All this takes is basically replacing the \u201cMenu\u201d button with a close button instead when the user is on the menu page. When clicked, we can take the user back to the last page they were on in a couple of ways. If we are using a server-side CMS, like WordPress, then we can grab the last URL using $_SERVER['HTTP_REFERER']<\/code> and set it as the \u201cclose\u201d button URL.<\/p>\n\n\n\n

But if we\u2019re not using a server-side setup then, yeah, we might need a few lines of JavaScript to get that last URL.<\/p>\n\n\n\n

<a href=\"https:\/\/MyHomePage.com\" onclick=\"handleClick(event)\">\u00d7<\/a>\n\u2028\n<script>\n\u00a0 function handleClick(event) {\n\u00a0 \u00a0 \/\/ Don't follow the link\n\u00a0 \u00a0 event.preventDefault();\n\u00a0 \u00a0 \/\/ Go back to last visited page \u00a0\n\u00a0 \u00a0 window.history.back();\u00a0\n\u00a0 \u00a0 \/\/ Bail out of the function\n\u00a0 \u00a0 return false;\n\u00a0 }\n<\/script><\/code><\/pre>\n\n\n\n
So, while I like this method and pattern, it might require JavaScript depending on the project.<\/p>\n\n\n
Alternative 2: The horizontal scroller<\/h3>\n\n\n
This approach is perfect for shorter link lists and allows users to access all of the navigation items without opening anything or clicking away from where they are. GitHub uses this approach for sub-menus.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Using flexbox combined with a scrolling overflow in CSS will do the trick! <\/p>\n\n\n\n