Twitter

How To Create A Javascript Slide-Out Menu

If you’re viewing this website on your mobile device, you may have already used the slide-out menu to navigate around the site. If you haven’t, you can click the yellow square on the top right of the screen to have a look at it without leaving this page.

A slide-out menu is a space-efficient way of creating a navigation menu on a smaller screen device where screen space is at a premium.

In this post I’m going to explain how to implement this type of menu on your website or web-app.

How It Actually Works

In essence, this menu is a div that is not displayed by default, and is given a width value only when the javascript function to do so is called on it.

So, the “slide-out” is actually an illusion. When the page is loaded, by default, the menu div has a width of 0px, and so does not display on the page.

Then, we call a Javascript function on it which gives it a width value of whatever we want, say 250px.

How To Implement It On Your Website

There are three parts to this implementation.

First, there’s the HTML:

<div id="mySidenav" class="sidenav">

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<a href="https://www.adampatel.co.uk/" rel="nofollow">Home</a>
<a href="https://www.adampatel.co.uk/about/">About</a>
<a href="https://www.adampatel.co.uk/portfolio/">Portfolio</a>
<a href="https://www.adampatel.co.uk/cv/">CV</a>
<a href="https://www.adampatel.co.uk/blog/tutorials/">Coding Tutorials</a>
<a href="https://www.adampatel.co.uk/blog/">Blog</a>
</div><!-- // sidenav -->

We have a div called mySidenav which contains a few standard hyperlinks, followed by the closing of the div.

Lines 2 and 3 are also an a tag but they trigger the javascript function that closes the menu.

Second, there’s the CSS…

The CSS we put in the stylesheet will be the values of various CSS properties by default, ie. when the page first loads.

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

You’ll notice on line 4, the default width of the div is 0%, so it doesn’t display by default.

Finally, part 3 is the Javascript

Place this code in the head of your HTML.

<script>
/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>

There are two Javascript functions in this code.

openNav() which selects the mySidenav div and applies a width of 250px to it, thus making the menu slide out when this function is called.

closeNav() does the opposite. It reapplies a width of 0 when the function is called.

But how do we call the function? Well you’ve already seen in the HTML in part 1 that we called one of those functions within the menu. Calling the other is much the same, except we call it from an element that is visible on the page by default, in the case of my website, the menu button.

<div id="call_menu"><span align="center" onclick="openNav()">MENU</span></div>

It’s the onclick=”openNav()” bit that calls the Javascript function and activates the slide-out menu.

And that’s it!

You can of course apply your own colour schemes and fonts by making changes to the CSS.

Copyright 2021. All Rights Reserved. Adam Patel