Cre­ate a slide out menu

A slide out menu al­lows you to make full use of screen space for user nav­i­ga­tion

Web Designer - - Lightbox -

1. Doc­u­ment ini­ti­a­tion The first step is to de­fine the page doc­u­ment. This con­sists of a HTML con­tainer rep­re­sent­ing the web­page, which con­tains the head and body sec­tion. While the head sec­tion is used to load the ex­ter­nal CSS and Javascript re­sources, the body sec­tion is used to store the vis­i­ble page con­tent cre­ated in step 2.

<!DOCTYPE html>

<html>

<head>

<ti­tle>slide Out Menu</ti­tle>

<link rel="stylesheet" type="text/css" me­dia="screen" href="styles.css"/>

<script src="code.js"></script>

</head>

<body>

*** STEP 2 HERE

</body>

</html> 2. Page con­tent The page con­tent con­sists of a head­ing ti­tle, along with a nav­i­ga­tion con­tainer. This nav­i­ga­tion stores a se­ries of links and has been as­signed a 'data-ac­tion' at­tribute. It is this at­tribute that will be used by the Javascript and CSS to ap­ply styling and func­tion­al­ity to the con­tainer and its el­e­ments.

<h1>slide Out Menu</h1>

<nav data-ac­tion="ex­pand"> <span>&#9776;</span>

<a href="#">page 1</a>

<a href="#">page 2</a>

<a href="#">page 3</a>

</nav> 3. CSS ini­ti­a­tion The HTML is now com­plete, so cre­ate a new file called 'styles.css' to ini­ti­ate the pre­sen­ta­tion for­mat­ting. This step sets the HTML doc­u­ment and its body to have no vis­i­ble bor­der spac­ing, along with a black back­ground. Colour is set to white as the de­fault colour for con­tent text to in­herit. html, body{ dis­play: block; width: 100%; height: 100%; back­ground: #000; color: #fff; } 4. Nav­i­ga­tion setup The nav­i­ga­tion is to dis­play with fixed po­si­tion­ing and with a z-in­dex above every­thing so that it can ap­pear to cover the full screen re­gard­less of where the user has scrolled to. It is ini­tially po­si­tioned out of view on the left side of the screen’s vis­i­ble view­port. A tran­si­tion rule is ap­plied to an­i­mate any changes over a du­ra­tion of one sec­ond. nav{ dis­play: block; po­si­tion: fixed; box-siz­ing: bor­der-box; top: 0; left: -100vw; z-in­dex: 9999; padding: .5em 1em .5em 1em;; width: 100vw; height: 100vh; text-align: cen­ter; back­ground: red; tran­si­tion: all 1s; } 5. Nav open and icon The nav­i­ga­tion’s left po­si­tion is set to zero when an

'open' class has been ap­plied, trig­ger­ing the an­i­mated tran­si­tion de­fined in the pre­vi­ous step. The nav­i­ga­tion’s first child is the ex­pand icon, which uses fixed po­si­tion­ing to al­ways re­main vis­i­ble in the cen­tre of the left side of the screen. nav.open{

left: 0; } nav *:first-child{ po­si­tion: fixed; padding: 1em; cur­sor: pointer; left: 0; top: 50vh; clear: both; } 6. Nav­i­ga­tion links Each an­chor link in­side of the nav­i­ga­tion con­tainer is set to be four times the size of the de­fault text. Their colour is set to black, with a mar­gin ap­plied at their top to guar­an­tee ver­ti­cal spac­ing is vis­i­ble. Set­ting their dis­play as 'block' makes each link au­to­mat­i­cally ap­pear to be stacked ver­ti­cally. nav a{ dis­play: block; font-size: 4em; color: #000; font-fam­ily: ar­ial; text-dec­o­ra­tion: none; mar­gin-top: .2em; } 7. Javascript lis­tener Cre­ate a new file called 'code.js'. This step waits un­til the page has loaded, upon which it searches for the first child of all nav­i­ga­tions with the 'data-ac­tion' at­tribute set to 'ex­pand'. This first child, be­ing the open icon, has a 'click' event lis­tener ap­plied, upon which tog­gles the el­e­ment to have or not have an 'open' class ap­plied. win­dow.ad­de­ventlis­tener("load",func­tion(){

var nodes = doc­u­ment. query­s­e­lec­torall('nav[data-ac­tion="ex­pand"] *:first-child'); for(var i=0; i<nodes.length; i++){ nodes[i].ad­de­ventlis­tener("click",functi on(){

if(this.par­entn­ode.class­name == "open") this.par­entn­ode.class­name = ""; else this.par­entn­ode.class­name = "open";

});

}

});

***

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.