X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

PHP - Adding Navigation


Learn PHP by building a web site from scratch.

Part IV: Adding a Navigation Menu.


What We Will Do

In this chapter we will:

  • Add a navigation menu

Add a Navigation Menu

Create a new file named Header.php.

Put the following code inside the file:

Header.php

<ul id="menu">
<li><a href="Index.php">Home</a></li>
<li><a href="Customers.php">Data</a></li>
<li><a href="About.php">About</a></li>
</ul>


Edit The Style Sheet

Edit your style sheet (Site.css):

Put the following (red marked) code inside the file:

Site.css

body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}

#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}

h1
{
font: Georgia, serif;
border-bottom: 3px solid #cc9900;
color: #996600;
}

ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}

ul#menu li
{
display: inline;
}

ul#menu li a
{
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #034af3;
border-radius: 4px 4px 0 0;
}

ul#menu li a:hover
{
background-color: #e8eef4;
}

The style sheet above, is a copy of the style sheet from the previous chapter, with added styles for an unordered list (marked red).


Edit the Home Page

In your "DemoPHP" folder, edit the file named "Index.php".

Include the "Header.php" file:

Index.php

<!DOCTYPE html>

<html>
<head>
<title>PHP Demo</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>

<?php include("Header.php"); ?>

<div id="main">
<h1>Welcome to W3Schools</h1>
<h2>Web Site Main Ingredients</h2>
<p>A Home Page (Index.php)</p>
<p>A Style Sheet (Site.css)</p>
<p>Include files (Header.php, Footer.php)</p>
<?php include("Footer.php"); ?>
</div>

</body>
</html>

Run example »


Congratulations

You have added navigation to your website.



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