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


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 FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook