Wednesday April 28, 2021 By David Quintanilla
How to Preserve the Menu State on Page Load (Using Local Storage)

Final product imageFinal product imageFinal product image
What You may Be Creating

On this tutorial, we’ll create a easy static web site with Tailwind CSS after which discover ways to protect its menu state on web page load.

The primary time we go to the location, the menu will probably be hidden. Nevertheless, as quickly as we open it and shut the browser, we’ll use native storage and JavaScript to maintain the menu will open the subsequent time we go to the location. In reality, it’s going to keep open till we shut it once more.

Prepared for an additional problem?

1. Create the Mission

As a primary step, we’ve to arrange the challenge construction and determine the place we’ll host it.

One possibility is to develop it regionally after which, as soon as prepared, add it to GitHub Pages. I’ve used this technique up to now for various demos. For instance, check out this one that customizes Bootstrap 4 tabs.

Another method is to make use of CodePen Projects for each the event and internet hosting. It’s value noting that relying in your CodePen plan, you’ll be capable to host a special variety of tasks.

For this tutorial, as we haven’t executed it earlier than, let’s create a CodePen Mission and benefit from all of the highly effective options that include it.

How to create a CodePen ProjectHow to create a CodePen ProjectHow to create a CodePen Project

By default, CodePen offers varied starter challenge templates. Right here, we’ll choose essentially the most primary one.

The selected starter template for our CodePen ProjectThe selected starter template for our CodePen ProjectThe selected starter template for our CodePen Project

Our challenge will embrace 4 related HTML recordsdata, an SCSS file that may compile to a CSS one, and a JavaScript file, like this:

The project structureThe project structureThe project structure

Final however not least, you possibly can export and run it out of your native machine.

You can export a CodePen ProjectYou can export a CodePen ProjectYou can export a CodePen Project

2. Tailwind CSS

As an alternative of making the kinds from scratch, we’re going to utilize Tailwind CSS, a well-liked new utility-first CSS framework that has gained loads of traction from builders. Created by Adam Wathan, its philosophy is to maneuver all of the complexity to the HTML recordsdata by including pre-existing courses to the weather.

Tailwind CSS frameworkTailwind CSS frameworkTailwind CSS framework

As I at all times preferred this idea, I’ve adopted it up to now for some demos like this one. Study extra right here:

3. The HTML

All HTML recordsdata will include a header and a few dummy content material.

Contained in the header we’ll place:

  • The corporate brand
  • The hamburger icon
  • The navigation menu

We’ll additionally want to incorporate the next required recordsdata:

  • The Tailwind CSS file
  • Our personal CSS and JavaScript recordsdata

To make the hamburger icon slightly extra accessible, we’ll use the aria-label, aria-expanded, and aria-controls ARIA attributes. As we’ll see in a while, the values of the primary two attributes will change relying on the menu state.

Right here’s the markup for the index.html web page:

Don’t really feel overwhelmed by the quantity of helper CSS courses. These are all coming from Tailwind CSS (aside from the toggle-button and menu ones that we’ll use within the JavaScript half to reference the goal components).

As this isn’t a Tailwind tutorial, I’m not going to clarify what every class does. Most of those are self-explanatory, however there are some others like text-5xl that aren’t so clear, so that you’ll should dig into the documentation or browser console and see its precise use.

Simply to present you an thought, think about the courses that we apply to the .menu ingredient together with the generated CSS:

Utility Class Generated CSS
flex show: flex;
transition-property: rework;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
rework: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
translate-y-full --tw-translate-y: 100%;

4. Toggle the Menu

Every time we click on on the menu hyperlink, the next actions will occur:

  • We’ll toggle its is-active class. If it comprises this class, it is going to be transformed easily to a minus icon. 
  • We’ll toggle the translate-y-full class of the menu. This can be a Tailwind class that may decide whether or not the menu will seem or not.
  • Relying on the menu state, we’ll replace the aria-label and aria-expanded ARIA attributes.

Right here’s the JavaScript code that may implement this performance:

And the associated SCSS kinds:

Persist Menu State on Web page Load

Thus far, our menu works nice. However let’s go a step additional and discover ways to protect its state. That mentioned, the very first time we go to the location, the menu will probably be invisible. Nevertheless, as quickly as we open it and shut the browser, this may stay open the subsequent time we go to the location till we shut it once more.

This can be a good case for displaying how native storage can clear up this type of request.

Let’s be extra particular:

  • Upon hamburger icon click on, we’ll retailer on native storage the menu-state key. Potential values could be open and closed.
Store the menu state in local storageStore the menu state in local storageStore the menu state in local storage
  • When the web page hundreds, we’ll examine the worth of this key. If the consumer has already opened the menu, the hamburger icon will obtain the is-active class, the menu will not include the translate-y-full class, and the ARIA-related attributes will change accordingly.
The open state of the menuThe open state of the menuThe open state of the menu

Let’s have a look at the JavaScript code that may deal with this logic:

After all, as an enchancment, you possibly can stop the animations from operating on web page load. However I’ll depart this from now because it’s of secondary significance.

You’ve Realized Use Native Storage!

We’ve simply completed, people! Immediately, we realized to construct a CodePen Mission that makes use of Tailwind CSS for its kinds and persists its menu state on web page load utilizing JavaScript and native storage. I hope you’ve realized one or two new issues and also you’ll quickly have the opportunity apply them to your tasks.

Be happy to boost the demo by making the menu much more accessible or including extra Tailwind options. In that case, don’t overlook to share it with us!

As Tailwind is a scorching matter in the mean time, I’m planning to jot down a Tailwind-oriented tutorial that may describe customise its default choices or mix it with one other fashionable framework like Bootstrap. If you’d like one thing particular like this, tell us through social media.

As at all times, thanks for studying!

Extra Sensible JavaScript Tasks

We’ve got a ton of fascinating JavaScript tutorials that will help you be taught. Dig in!

Source link