Create An Interactive Navigation Image Control

Create An Interactive Navigation Image Control

Make empty space more appealing with this eye-catching animated effect

Download Code

STEP 1: Page initiation

The first step of creating the webpage is the definition of the HTML document. This consists of HTML to define the document container, which in turn stores the head and body sections. While the head section is used to load external JavaScript and CSS resources, the body section is used to contain the visible HTML content created in step 2.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Navigation Imagery</title>

href="styles.css" />

js"></script>

</head>

<body>

*** STEP 2 HERE

</body>

</html>

STEP 2: HTML Content

The navigation content is kept to a minimum, with a specific focus on defining the navigation content. This consists of the navigation container and its associated links. Each link has a 'title' attribute that will be used as a reference to influence visual styling in later steps, with the help of JavaScript and CSS.

CODE:

</nav>

STEP 3: Event Management

Create a new file called 'code.js'. Upon completion of the page loading, this code will search for all of the 'a' links inside the 'mainNavigation' from step 2. A 'for' loop is used to apply a 'mouseover' event listener to each item found. This event listener will set an attribute called 'data-theme' on the parent 'mainNavigation' container, which is to be set as the title attribute of the 'mouseover' link.

CODE:

window.addEventListener("load", function(){

var nodes = document.

querySelectorAll("#mainNav a");

for(var i=0; i<nodes.length; i++){

nodes[i].

addEventListener("mouseover", function(){

this.parentNode.

setAttribute("data-theme", this.

getAttribute("title"));

});

}

});

STEP 4: CSS Initiation

Create a new file called 'styles.css'. This step initiates the CSS with the general page styling. Specifically, all elements are set to use 'border-box' for including padding as part of width calculations. The page is set to have no visible border spacing through margin and padding, as well as the default font for content to inherit.

CODE:

*{ box-sizing: border-box; }

html,body{

display: block;

margin: 0;

padding: 0;

font-family: Helvetica, sans-serif;

color: #000;

}

STEP 5: Navigation Container

The navigation container is set to use fixed positioning so that it always remains visible. Its width is set to half of the browser window, with settings to present any background image to cover 40% of the right side.

CODE:

#mainNav{

position: fixed;

display: block;

width: 50vw;

transition: background 1s;

background-repeat: no-repeat;

background-position: right center;

background-size: 40%;

}

STEP 6: Navigation Items

Each item inside the navigation container is set to display across 50% of the navigation – leaving space for its associated item. Each item is set with a border, padding and margin to appear distinct from each other. Alternative background and font colours are used when items are being hovered with the mouse pointer.

CODE:

#mainNav a{

display: block;

width: 50%;

color: #000;

padding: 1em;

margin-top: .5em;

border: 1px solid;

}

#mainNav a:hover{

background: rgba(0,0,0,.5);

color: #fff; }

STEP 7: Image Definition

The final step is to associate the images to display for each of the navigation links. With the JavaScript from step 3 setting the 'data-theme' attribute of the parent container to match the title of the latest hovered link, this step is used to specify the background image for each value that 'data-theme' could be set to.

CODE:

#mainNav[data-theme="Page 1"]{

}

#mainNav[data-theme="Page 2"]{

}

#mainNav[data-theme="Page 3"]{

}

YouTube

Download Code