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.
