← Snippets - Script

Slide-Out Sidebars

Sidebars that slide out from the left or right are a common solution for online banking, feedback forms, or even the menu. Below is an example setup for how you might want to make this work.

How To

HTML

The HTML for a slide-out panel can contain anywhere from one to three components.

Toggle button

The first component is a toggle button. This example has one built in with the div for the panel as well, because the button is meant to be sticky, same as the panel. If your slide-out panel is triggered by links within content, or other inline setups, you won’t need this.

Panel

The second component is the panel itself. This is the only component that’s required. The panel will most likely have a “close” button within it, so you’ll want to create, at minimum, header and body sections. You could also add a footer or other inner sections if you want.

<div class="slideoutPanel requestAQuote" id="requestAQuote">
	<div class="requestAQuote__toggle request-toggle">Request a Quote</div>
	<div class="slideoutPanel__panel">
		<div class="slideoutPanel__panel__inner">
			<div class="slideoutPanel__panel__close">
				<button type="button" class="close ml-2" aria-controls="requestAQuote">
				  <span class="sr-only">Close Request a Quote panel</span>
				  <svg class="bs-icon">
				    <use href="#x-lg"/>
				  </svg>
				</button>
			</div>
			<div class="content text-light">
				slide-out panel content can go here.
			</div>
		</div>
	</div>
</div>

Overlay

The last component, which is optional but usually preferred, is an overlay div. This should be one of the last items before your closing </body> tag, and you may wish to create a separate mustache file just for this to make sure it gets included the same on every template that the slide-out appears on.

You’ll also want to add the aria-hidden="true" property to your overlay, because this is not something that needs to be handled with screen readers.

The reason why we would create an overlay is that it’s the easiest way to “click off of the overlay to close it”, and you can easily change the background color of the overlay this way as well–or leave it transparent, if there is no visible overlay, and it still works just the same. In theory, you could create an overlay with a before/after pseudo-class of the slide-out panel element, but this isn’t recommended because you can’t target pseudo-elements with script, which means you’d have to come up with another way to close the panel when clicking off of it. With this layout of overlay, you can click the overlay, which triggers the panel to close.

<div class="slideoutoverlay" aria-hidden="true"></div>

CSS

This will mostly be up to the design, but here are some basic things to keep in mind.

Toggle button

.requestAQuote__toggle { position: fixed; top: 50%; transform: translateY(-50%); left: 0; transition: all .3s ease-in-out; z-index: $zindex-sticky; }

In this example, the toggle button has position fixed, and is positioned so that it is always vertically centered on the far left of the browser. There is also a transition on it to allow hover effects to be smooth.

You’ll also want to make sure that this has a high enough z-index so that it overlaps all the things you want it to overlap, but doesn’t overlap the panel or its overlay.

Panel

.slideoutPanel__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	height: 100vh;
	max-width: 385px;
	left: -385px;
	z-index: $zindex-sticky + 2;
	transition: all .3s ease-in-out;
	&.open {
		left: 0;
	}
}

Your panel will have a class of either position: fixed; or position: absolute;. This is because you want your panel to open over the top of other things on the page, rather than pushing them to the side. To help with this, you’ll also need to set the top and bottom properties to 0.

You can set the height property of the panel to 100vh to make it 100% height of the window.

You will want to give your panel a width and/or max-width. Usually, you can give it a specific width for tablet and up, but then on mobile and below it becomes full-width.

The left property is set initially to a negative value that is otherwise the same as the max-width of the panel. This moves the panel offscreen to the left enough that it is hidden. Then, when the open class is added, the left value is changed to 0 so that the panel slides in from the left side of the screen.

The z-index property should also be set so that your panel is high-enough z-index that it’s overlapping everything on the page that you want it to overlap.

The last element to consider for the panel is the transition. Basically, you want it to be a smooth transition of the panel sliding in, so set this up in a way that looks good. Leaving the transition off will make it jarring when it appears suddenly.

Overlay

.slideoutoverlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: $zindex-sticky + 1;
  content: '';
  background-color: rgba($gray-100,0);
  transition: all .3s ease-in-out;
  visibility: hidden;
  opacity: 0;
  &.open {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    background-color: rgba($gray-100,.05);
  }
}

You will want to set the default settings for the overlay to be position: fixed;, with top, bottom, right, and left positioning all sent to 0. Width and height should also be set to 100%. As above, you’ll want to add a z-index and transition to make sure things appear properly. You will need to also set the content property to an empty set of quotes, to allow the area to be created and styled.

Properties that change when the “open” class is added should include things like pointer-events being changed to “all”, so that clicks to close actually go through, the visibility and opacity properties being made visible, and the background-color being set to its active opacity. If your panel doesn’t have a visible overlay, you can keep this as transparent even when open.

Script

// request a quote slide-out
$('.request-toggle').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('.requestAQuote .slideoutPanel__panel').toggleClass('open');
});
$('.requestAQuote button.close').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('.requestAQuote .slideoutPanel__panel, .slideoutoverlay').removeClass('open');
});

The script only needs to be a simple set of click functions–one to add on the class of “open” when the toggle button is clicked (or remove it if it’s already there), and one to remove the “open” class when either the close button or overlay are clicked.

Example Sites