Chapter 6 -- 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>PHP Demo</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> 

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).

Need help? Try KimmyJusTips!

---