Build a fullscreen ex­pand­ing nav­i­ga­tion menu

Use CSS and JS to cre­ate a menu that al­lows nav­i­ga­tion to avoid con­flict­ing with your con­tent lay­out

Web Designer - - Lightbox -

1. HTML tem­plate

The first step is to ini­ti­ate the struc­ture of the doc­u­ment. This con­sists of HTML to de­scribe the doc­u­ment con­tainer, which stores the head and body sec­tions. While the head sec­tion is used to load the ex­ter­nal CSS and Javascript re­sources, the body is used to store vis­i­ble con­tent cre­ated in the next step.

<!DOCTYPE html>

<html>

<head>

<ti­tle>ex­pand­ing 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. HTML con­tent

The con­tent con­sists of a ti­tle head­ing, and most im­por­tantly, the nav­i­ga­tion de­scrip­tion. This at­tribute has a 'data-ac­tion' at­tribute set to 'ex­pand', as well as con­tain­ing two child 'span' el­e­ments. The first span will be crafted into the open­ing but­ton, while the sec­ond span is used to store the nav­i­ga­tion links.

<h1>ex­pand­ing Menu</h1>

<nav data-ac­tion="ex­pand">

<span></span>

<span> <a href="#">page 1</a> <a href="#">page 2</a> <a href="#">page 3</a> </span> </nav>

3. Open­ing click

Cre­ate a new file called 'code.js'. This step firstly places a lis­tener on the browser win­dow, which will trig­ger a func­tion once the page has loaded. This func­tion searches for the first child of any 'nav' el­e­ment with the 'data-ac­tion' at­tribute set to 'ex­pand'. These el­e­ments have a 'click' lis­tener ap­plied, which will tog­gle the ap­pli­ca­tion of the 'open' class to the par­ent nav con­tainer. 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",func tion(){ var par­ent = this.par­entn­ode; if(par­ent.classlist.con­tains("open") == false)par­ent.classlist.add("open"); else par­ent.classlist.re­move("open"); });

}

*** STEP 4 HERE });

4. Ap­pear­ance de­lay

The fi­nal piece of Javascript searches for the el­e­ments in­side the sec­ond child of the nav con­tainer – ie the links. Each of these el­e­ments has a 'tran­si­tion-de­lay' at­tribute ap­plied that is cal­cu­lated in re­la­tion to their in­dex po­si­tion, plus 0.5 sec­onds. This will re­sult in each link in­di­vid­u­ally ap­pear­ing in de­scend­ing or­der from top to bot­tom. var nodes = doc­u­ment.query­s­e­lec­torall(

'nav[data-ac­tion="ex­pand"] *:nthchild(2) > *'

); for(var i=0; i<nodes.length; i++){ nodes[i].style.tran­si­tion­de­lay = (0.5+(i/3))+"s";

}

5. CSS nav­i­ga­tion con­tainer

Cre­ate a new file called 'styles.css'. This first set of for­mat­ting sets the nav­i­ga­tion con­tainer to ap­pear at the right side of the screen. Fixed po­si­tion­ing and a high z-in­dex is used to guar­an­tee its vis­i­bil­ity with­out ob­struc­tion from the page con­tent or page scrolling lo­ca­tion. The trans­par­ent back­ground al­lows any un­der­ly­ing colours, con­tent or ef­fects of the main page to re­main vis­i­ble. nav{ dis­play: block; po­si­tion: fixed; box-siz­ing: bor­der-box; font-fam­ily: ar­ial; top: 0; right: 0; z-in­dex: 9000; pad­ding: 0; width: 2em; height: 100vh; back­ground: trans­par­ent; }

6. Open but­ton styling

The open but­ton is made from two types of el­e­ment.

The first child in­side the nav con­tainer is used for Javascript click de­tec­tion, while a vir­tual 'be­fore' el­e­ment is used to show the sta­tus icon. This step uses the 'con­tent' at­tribute to show the de­fault ham­burger icon, along with set­ting the size and po­si­tion of the open/ close but­ton. nav::be­fore, nav > *:first-child{ con­tent: "\2261"; dis­play: block; po­si­tion: ab­so­lute; right: 0; top: 48vh; z-in­dex: 99999; font-size: 2cm; width: 0.5em !im­por­tant; height: 1em; }

7. Nav­i­ga­tion link con­tainer

This step styles the sec­ond child in­side the nav­i­ga­tion used to store the links. Fixed po­si­tion­ing is used to make sure that it is al­ways ready to ap­pear into view from the bot­tom of the screen re­gard­less of the page scrolling lo­ca­tion. Size is set so the con­tainer and its con­tent is in­vis­i­ble, while other pre­sen­ta­tion at­tributes such as back­ground colour are set for fu­ture sta­tuses to in­herit. nav > *:nth-child(2){ po­si­tion: fixed; height: 0; width: 100vw; bot­tom: 0; left: 0; back­ground: red; opac­ity: 0; tran­si­tion: opac­ity 1s; over­flow: auto; }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.