Latest web development tutorials
 

Web Building - Adding Navigation


Building a web site from scratch.   Part V: Adding navigation.


What We Will Do

In this chapter we will:

  • Add a navigation menu

Add a Navigation Menu

In the demoweb folder, edit the JavaScript file script.js.

Add the following to the script:

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";

Edit The Style Sheet

In the demoweb folder, edit your style sheet site.css

Add the following to the file content:

Addition to site.css

ul#menu {
    padding: 0;
    margin-bottom: 11px;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    color: white;
    background-color: black;
}

Edit the Home Page

In the demoweb folder, edit your home page index.html.

index.html

<!DOCTYPE html>

<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>

<nav id="nav01"></nav>

<div id="main">
  <h1>Welcome to Our Company</h1>
  <h2>Web Site Main Ingredients:</h2>

  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>

  <footer id="foot01"></footer>
</div>

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

</body>
</html>
Try it Yourself »

The page above, is a copy of the page from the previous chapters, with an added navigation element. 


Edit All Pages

In the demoweb folder, add the navigation element to the other pages (customers.html and about.html).


Read More

Read more about HTML lists in our HTML Tutorial.