jeff hooton

Create a Simple, Vanilla Javascript Slideout Navigation Panel

posted on feb 26, 2020

css

javascript

Creating a vanilla javascript slideout navigation panel is a great thing to have in your toolbelt at the beginning of your front-end web development career. Almost every single website is going to have a slideout navigation component in order to display a menu for all screen sizes.

Creating a slideout web component can be done in three simple steps:

  1. Create the html components that make up the slideout navigation, a button to toggle the navigation and the panel itself
  2. Create the css or scss to style both the panel and the button
  3. Vanilla javascript to attach a click listener to the button

Creating the html components of the slideout navigation

When you think of what elements you're going to need to create a simple slideout navigation panel, two main pieces should come to mind.

  • The container to house the slideout panel
  • The button to toggle the action of the pane sliding out

To visualize this, it should look something like this:

HTML for slideout nav

<body>
  <div class="pane"></div>
  <button class="toggle">Toggle</button>
</body>

Keep in mind while you're writing this that you should be attaching unique classes or identifiers to the panel as well as the button so that you can select them with javascript it step 3.

Also remember that depending on the structure of your DOM, you may need to be careful about where you put these components. This is especially true if you're using a frontend framework like Vue, React or Angular and need to toggle the state of whether your navigation component is open or closed from different routes/pages.

Create the css/scss for the slideout panel

CSS is usually extremely subjective, and a lot of this styling will be optional - but some pieces of it are going to be necessary. To make a simple, bare-bones slideout you need to make sure that the toggle button is positioned somewhere that it is not going to be covered up by the slideout.

You can usually accomplish this by setting the positioning of the button like this:

.toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

This styling is super simple and should (depending on the markup surrounding the button), position the element 1rem from the top of the viewport, and 1rem from the right side of the viewport.

The next piece of this is adding styling to the actual pane itself. The goal here is to position the panel on the opposite side of the viewport that you put the toggle button. You can do so with an almost identical strategy to how you positioned the button, with a few additions:

.pane {
  position: fixed;
  left: -30%;
  top: 0;
  height: 100vh;
  width: 30%;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);

  // Optional
  transition: 0.5s all ease;
}

.pane.open {
  left: 0%;
}

The position property is set to fixed for the pane itself so that if the viewport is larger than 100vh, scrolling down the page will not move the pane itself, it will remain fixed, taking up the left side of the screen. You're also setting a width on the element, and sliding the container to the left (offscreen) the exact same amount that you set for the width of the element.

I've also added a box-shadow so that if your background for the body element and for the pane are identical, you will be able to tell that the pane has slid into view.

You're also going to want to add a class to represent the pane in it's open state. For this state, you just want to reset the left edge of the element to match the 0 position, or far left point in the visible viewport.

When you have all of this written, it should look something like this:

CSS for slideout nav

Keep in mind that I have used the preprocessor SCSS for this. The only thing I'm using it for is nesting properties. If you look at the &.open ruleset inside .pane, that compiles down to a selector like I wrote above, .pane.open.

Javascript for vanilla javascript slideout navigation

The third and last step, the part that is going to make the slideout navigation actually function is javascript. Up until now we have structured out and styled the slideout, and added a representation of what the pane is going to look like open and closed.

We just need to use javascript to tell the pane to open and close itself.

The first thing that you need to do is select the elements that you need to affect or listen to.

// Select the button
const button = document.querySelector('.toggle');

// Select the slideout pane
const pane = document.querySelector('.pane');

What this code is doing is creating two separate variables, button and pane, to represent the HTML elements from step 1. The assignment portion of these variables, the part after the equals sign, is using the document's method querySelector to find the HTML elements from the page. document.querySelector accepts any valid CSS selector, so you could have just as easily assigned the button to document.querySelector('button'), however you should try and get in the habit of using something more specific to select your elements with javascript.

The next portion of the javascript is going to add a click listener to the button to listen to click events on the website. Whenever the button is clicked, we want to toggle the class open on the pane element. We already have variables that represent each of these elements, so this is a pretty straight-forward task.

button.addEventListener('click', () => {
  pane.classList.toggle('open');
});

The button element has a function attached to it called addEventListener. This function takes in two arguments. The first argument is a string that represents which event you want to listen for. For this use case we want to attach listener to the click event. The second argument that this function takes is a callback function that executes every single time that the button's click event fires.

Inside the callback function we are looking at the pane element's list of classes, pane.classList and executing a function toggle on that class list. the toggle function accepts an argument which is a string that is a class name that you want to either toggle on or off.

So in short, this javascript section selects both of the elements from the DOM. After it has those selected, it attaches an event listener listening to a click event on the button. When a click event occurs, the callback function executes and toggles the class open on the pane, which adds our already styled class to the pane.

When you have the javascript written, it should look something like this:

Javascript for slideout nav

To see a working example of this, you can see it at this codepen.

There is a lot more you can build off of this foundation, and a lot that you can customize. There is also a way to do this by handling the animation and the positioning solely with javascript.

That would be a good challenge if you would like to go from here and build on this knowledge.

If you have any questions or comments, feel free to drop me a mention or DM on twitter.

more posts