A great way to improve the user experience on your site is to add a slide-out menu; it creates an eye-catching way for users to find what they want – wherever they may be on the page – and means they don't have to scroll back up to the top nav.
We particularly love the slide-out menu on the site for Ice Cream Parlour Cosmetics, designed by Hiroka Hasegawa (if you see sites you like, be sure to save them in cloud storage for inspiration). Read on to find out how to replicate this slide-out effect on your own website. Keen to create a website that makes an impression? The right web hosting service or website builder will do just that.
01. Document initiation
The first step is to define the page document. This consists of a HTML container representing the webpage, which contains the head and body section. While the head section is used to load the external CSS and JavaScript resources, the body section is used to store the visible page content created in step #2.
<!DOCTYPE html>
<html>
<head>
<title>Slide Out Menu</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css"/>
<script src="code.js"></script>
</head>
<body>
*** STEP 2 HERE
</body>
</html>
02. Page content
The page content consists of a heading title, along with a navigation container. This navigation stores a series of links and has been assigned a 'data-action' attribute. It is this attribute that will be used by the JavaScript and CSS to apply styling and functionality to the container and its elements.
<h1>Slide Out Menu</h1>
<nav data-action="expand">
<span>☰</span>
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</nav>
03. CSS initiation
The HTML is now complete, so create a new file called 'styles.css' to initiate the presentation formatting. This step sets the HTML document and its body to have no visible border spacing, along with a black background. Colour is set to white as the default colour for content text to inherit.
html, body{
display: block;
width: 100%;
height: 100%;
background: #000;
color: #fff; }
04. Navigation setup
The navigation is to display with fixed positioning and with a z-index above everything so that it can appear to cover the full screen regardless of where the user has scrolled to. It is initially positioned out of view on the left side of the screen's visible viewport. A transition rule is applied to animate any changes over a duration of one second.
nav{
display: block;
position: fixed;
box-sizing: border-box;
top: 0;
left: -100vw;
z-index: 9999;
padding: .5em 1em .5em 1em;;
width: 100vw;
height: 100vh;
text-align: center;
background: red;
transition: all 1s; }
05. Nav open and icon
The navigation's left position is set to zero when an 'open' class has been applied, triggering the animated transition defined in the previous step. The navigation's first child is the expand icon, which uses fixed positioning to always remain visible in the centre of the left side of the screen.
nav.open{
left: 0;
}
nav *:first-child{
position: fixed;
padding: 1em;
cursor: pointer;
left: 0;
top: 50vh;
clear: both; }
06. Navigation links
Each anchor link inside of the navigation container is set to be four times the size of the default text. Their colour is set to black, with a margin applied at their top to guarantee vertical spacing is visible. Setting their display as 'block' makes each link automatically appear to be stacked vertically.
nav a{
display: block;
font-size: 4em;
color: #000;
font-family: arial;
text-decoration: none;
margin-top: .2em;
}
07. JavaScript listener
Create a new file called 'code.js'. This step waits until the page has loaded, upon which it searches for the first child of all navigations with the 'data-action' attribute set to 'expand'. This first child, being the open icon, has a 'click' event listener applied, upon which toggles the element to have or not have an 'open' class applied.
window.addEventListener("load",function(){
var nodes = document.querySelectorAll('nav[data-action="expand"] *:first-child');
for(var i=0; i<nodes.length; i++){
nodes[i].addEventListener("click",function(){
if(this.parentNode.className == "open")this.parentNode.className = "";
else this.parentNode.className = "open";
});
}
});
***
This article was originally published in issue 274 of creative web design magazine Web Designer. Buy issue 274 here or subscribe to Web Designer here.
Related articles:
