X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET 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. 


Congratulations

You have added navigation to your website. In the next chapter we will add some AJAX code.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook