Three CSS Alternatives to JavaScript Navigation

In website navigation design, are you used to using JavaScript to implement hamburger menus? In fact, there are simpler and easier to access alternatives. This article will introduce three navigation modes without JavaScript to improve user experience and enhance website accessibility.

Follow the principle of gradual enhancement, prioritize building web pages for users who use old versions or weaker technologies, and then gradually add enhanced functions. If the basic technology can provide a quality experience, you don't need to rely on JavaScript. Avoiding JavaScript in navigation ensures that users can still browse the website normally even if JavaScript is disabled or if the script fails to load due to network problems.

Let's take a look at three alternatives to the JavaScript burger menu:

Alternative Solution 1: Independent Menu Page

Navigation does not have to always be at the head of each page. For situations where front-end lightweight websites or more navigation projects are available, it may be more practical to create a separate page to list all navigation links. WordPress theme Susty adopts this approach.

This mode is especially suitable for static websites that use file system routing. If the project is built using a static website generator, the page may be loading faster than the user can detect, and the templates are also more modular.

Just replace the Menu button with the Close button. There are several ways to bring the user back to the previous page when clicking the Close button. If you use a server-side CMS (such as WordPress), you can use $_SERVER['HTTP_REFERER'] to get the previous URL and set it to the URL of the Close button.

But if the server-side settings are not used, several lines of JavaScript code may be required to get the previous URL.

 <code><a href="https://www.php.cn/link/61c68ac879a7ec23b78912aa04f59d78" onclick="handleClick(event)">×</a> function handleClick(event) { event.preventDefault(); window.history.back(); return false; }</code>

So while this approach and pattern are good, specific projects may require JavaScript.

Alternative Two: Horizontal Rolling

This method is suitable for situations where the link list is short, and users can access all navigation items without opening anything or leaving the current page. GitHub uses this method in its submenu.

Just use a combination of scroll overflow in flexbox and CSS!

Alternative Three: Pure CSS burger menu

The hamburger menu mode usually uses JavaScript, but this is not necessary. Using CSS pseudo-selectors and HTML, you can create a rich mobile menu and use JavaScript for other features that really require it.

It can be seen that popular conventions do not mean that they are the only way. There are often easier and easier access methods, especially when it comes to navigation. Creating JavaScript-free functional, lightweight, immersive navigation is effortless and has some extra benefits. If you have created any interesting pure CSS navigation mode, please share it in the comments!

The above is the detailed content of Three CSS Alternatives to JavaScript Navigation. For more information, please follow other related articles on the PHP Chinese website!