Organize and design a navigation bar for your site using CSS, PHP and URL variables

This lesson will explains how to create a perfect navbar for your site using CSS (take a look first at this post), PHP and URL variable to load page into #main section of index.php page. Our navigation bar (#navbar) is between #topbar section and #main section:



Step 1: define #navbar element design using CSS
In our site structure, we open the css file default.css into CSS folder and we copy this code after the #footer element (take a look to default.css).

/* ------------------------------
PAGE ELEMENTS #NAVBAR
------------------------------ */
#navbar ul, #navbar ul li{ padding:0; margin:0; list-style:none; foat:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; foat:left; width:auto; padding:0px 10px;}

Step 2: add links to navbar #navbar into index.php page
In site root, we open index.php and we add this code inside #navbar section:

<div id="navbar">
<ul>
<li><a href="index.php?home">Home</a></li>
<li><a href="index.php?signup">Signup</a></li>
<li><a href="index.php?login">Login</a></li>
<li><a href="index.php?about">About</a></li>
</ul>
</div>

Step 3: add PHP code into #main section
Now we use PHP URL variable and PHP include() function to load page into #main section when an user click above a link into our #navbar section.




Copy and paste this code inside #main section (read this post for the page structure):

<div id="main">
<?php
//If is defined URL variable 'signup'
if(isset($_GET['signup'])){
// include page signup
include('include/in-signup.php');
//else if is defined URL variable 'login'
}else if(isset($_GET['login'])){
// include page login
include('include/in-login.php');}
//else if is defined URL variable 'about'
else if(isset($_GET['about'])){
// include page 'about'
include('include/in-about.php');}
// in all other cases include the home page
} else {
include('include/in-home.php');
}
?>
</div>

Our navigation structure is now ready! You can add easy other links into #navbar section and other if statement to load the relative pages.