Cre­ate an in­ter­ac­tive nav­i­ga­tion im­age con­trol

Make empty space more ap­peal­ing with this eye-catch­ing an­i­mated ef­fect

Web Designer - - Lightbox -

1. Page ini­ti­a­tion

The first step of cre­at­ing the web­page is the def­i­ni­tion of the HTML doc­u­ment. This con­sists of HTML to de­fine the doc­u­ment con­tainer, which in turn stores the head and body sec­tions. While the head sec­tion is used to load ex­ter­nal Javascript and CSS re­sources, the body sec­tion is used to con­tain the vis­i­ble HTML con­tent cre­ated in step 2.

<!DOCTYPE html>

<html>

<head>

<ti­tle>nav­i­ga­tion Im­agery</ti­tle>

<link rel="stylesheet" type="text/css" href="styles.css" />

<script type="text/javascript" src="code. js"></script>

</head>

<body>

*** STEP 2 HERE

</body>

</html>

2. HTML con­tent

The nav­i­ga­tion con­tent is kept to a min­i­mum, with a spe­cific fo­cus on defin­ing the nav­i­ga­tion con­tent. This con­sists of the nav­i­ga­tion con­tainer and its as­so­ci­ated links. Each link has a 'ti­tle' at­tribute that will be used as a ref­er­ence to in­flu­ence vis­ual styling in later steps, with the help of Javascript and CSS.

<nav id="main­nav">

<a href="#" ti­tle="page 1">Page 1</a>

<a href="#" ti­tle="page 2">Page 2</a>

<a href="#" ti­tle="page 3">Page 3</a> </nav>

3. Event man­age­ment

Cre­ate a new file called 'code.js'. Upon com­ple­tion of the page load­ing, this code will search for all of the 'a' links inside the 'main­nav­i­ga­tion' from step 2. A 'for' loop is used to ap­ply a 'mouseover' event lis­tener to each item found. This event lis­tener will set an at­tribute called 'data-theme' on the par­ent 'main­nav­i­ga­tion' con­tainer, which is to be set as the ti­tle at­tribute of the 'mouseover' link. win­dow.ad­de­ventlis­tener("load", func­tion(){

var nodes = doc­u­ment. query­s­e­lec­torall("#main­nav a"); for(var i=0; i<nodes.length; i++){

nodes[i]. ad­de­ventlis­tener("mouseover", func­tion(){ this.par­entn­ode. se­tat­tribute("data-theme", this. getat­tribute("ti­tle")); }); }

});

4. CSS ini­ti­a­tion

Cre­ate a new file called 'styles.css'. This step ini­ti­ates the CSS with the gen­eral page styling. Specif­i­cally, all el­e­ments are set to use 'bor­der-box' for in­clud­ing pad­ding as part of width cal­cu­la­tions. The page is set to have no vis­i­ble bor­der spac­ing through mar­gin and pad­ding, as well as the de­fault font for con­tent to in­herit.

*{ box-siz­ing: bor­der-box; } html,body{ dis­play: block; mar­gin: 0; pad­ding: 0; font-fam­ily: Hel­vetica, sans-serif; color: #000; }

5. Nav­i­ga­tion con­tainer

The nav­i­ga­tion con­tainer is set to use fixed po­si­tion­ing so that it al­ways re­mains vis­i­ble. Its width is set to half of the browser win­dow, with set­tings to present any back­ground im­age to cover 40% of the right side. #main­nav{ po­si­tion: fixed; dis­play: block; width: 50vw; tran­si­tion: back­ground 1s; back­ground-re­peat: no-re­peat; back­ground-po­si­tion: right cen­ter; back­ground-size: 40%; }

6. Nav­i­ga­tion items

Each item inside the nav­i­ga­tion con­tainer is set to dis­play across 50% of the nav­i­ga­tion – leav­ing space for its as­so­ci­ated item. Each item is set with a bor­der, pad­ding and mar­gin to ap­pear dis­tinct from each other. Al­ter­na­tive back­ground and font colours are used when items are be­ing hov­ered with the mouse pointer. #main­nav a{ dis­play: block; width: 50%; color: #000; pad­ding: 1em; mar­gin-top: .5em; bor­der: 1px solid; } #main­nav a:hover{ back­ground: rgba(0,0,0,.5); color: #fff; }

7. Im­age def­i­ni­tion

The fi­nal step is to as­so­ci­ate the im­ages to dis­play for each of the nav­i­ga­tion links. With the Javascript from step 3 set­ting the 'data-theme' at­tribute of the par­ent con­tainer to match the ti­tle of the lat­est hov­ered link, this step is used to spec­ify the back­ground im­age for each value that 'data-theme' could be set to. #main­nav[data-theme="page 1"]{

back­ground-im­age: url(im­age1.jpg); }

#main­nav[data-theme="page 2"]{

back­ground-im­age: url(im­age2.jpg); }

#main­nav[data-theme="page 3"]{

back­ground-im­age: url(im­age3.jpg); }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.