Create a slide-out menu

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; read on to find out how to replicate this effect on your own website.

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.

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.

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.

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.

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.

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.

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.

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: