Introduction

The other day one of the post of my other site was posted on reddit, and one of the readers commented that my site was unusable with No Script. Well the whole problem was that I’ve got the wrong configuration of PageSpeed Module, and the site entered in an infinite loop.

Anyway, that event made me think that my site’s menu just do not work if one deactivates the JavaScript support on the browser.

That site is based on Foundation, therefore it depends heavily on JavaScript, and on JQuery library.

Be a good digital citizen

Because most trackers use JavaScript to track you, a lot of people block JavaScript on their browsers using different software in order to do that.

If you want everybody to be able to read your website, and also be able to use your blog’s navigation, you should not make it in such a way that it will depend on JavaScript to work

Big examples

Most sites will depend on JavaScript to display the hamburger menu when you visit the site using a small screen, that is my case on my other website, but some will not even work on big screens for example.

On both of them you can’t use the menu if the No Script extension is on your web browser, even if you are working on big screens.

Options to avoid the use of JavaScript

There are different approaches to use if you want to avoid the use of JavaScript in your menus.

  1. Check for javascript and if not present, load an alternate menu
  2. Use a CSS menu:
    1. Option 1
    2. Option 2

Another option I like is to create a new page for your menu, if you are using WordPress, take a look at this theme1, which uses the approach I have mentioned, a dedicated page for menu.

Conclusion

You create your website in order for people to visit it, you create menus in order to make navigation of your website easy. So you need to ensure that your site will be usable no matter the technology your visitor is using. There will always be parts of the website that might not work with JavaScript disabled, but the menu should work.


  1. Designed by Kev Quirk↩︎