X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

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

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.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook