SupportiveHands, Helping Bloggers: How to Create a Dynamic Navigation in PHP for Your Website

When you design your own website and use HTML for creating navigation, it frustrates when you need to edit something in navigation menu. You need to edit each and every page for even minor changes and this is really a very tough task. Today we will learn how to create a dynamic navigation for your website in PHP. After creating navigation using PHP, you will be able to update all pages dynamically by modifying the base file only.

Image Source: IconArchive

Dynamic Navigation Using PHP

To create a dynamic navigation menu, first we need to compose a PHP file containing HTML code for navigation and name it navigation.php. If you don't have any idea, how to build a navigation, follow below steps. Remember that these steps will create a navigation menu according to my provided CSS, so if you need to need any other style, then you will have to use your own CSS or customize below according to your site's demands. To create navigation.php file, follow below instructions:

1. Open notepad, paste below code in it, edit the links and labels and save it as all file types. Then name it as navigation.php

<ul id="supportive_menu">
        <li><a href="http://yoursite.com/index.php">HOME</a></li>
        <li><a href="http://yoursite.com/services.php">SERVICES</a></li>
        <li><a href="http://yoursite.com/products.php">PRODUCTS</a></li>
        <li><a href="http://yoursite.com/testimonials.php">TESTIMONIALS</a></li>
        <li><a href="http://yoursite.com/about.php">ABOUT</a></li>
        <li><a href="http://yoursite.com/privacy.php">PRIVACY</a></li>
        <li><a href="http://yoursite.com/contact.php">CONTACT</a></li>
      </ul>

2. After saving above file as navigation.php, now define a style for navigation menu. To define the navigation menu style, use following CSS code or define your one if you are expert enough. Paste below code in notepad and save it as menu_style.css. You can define the width and height of the menu according to your site's layout

#supportive_menu
{ width: 920px;
height: 50px;
text-align: center; font-weight:bold;
margin: 0 auto;
background: grey;
ul#menu
{ margin:0;}

ul#menu li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;}

ul#menu li a
{ float: left;
height: 25px;
margin: 10px 0 0 20px;
padding: 5px 20px 0 20px;
text-align: center;
color: #FFF;
text-decoration: none;
background: transparent;}

3. Save above file and name as menu_style.css
4. Now upload both navigation.php and menu_style.css files to the root directory of your website

5. Open the homepage or any other page of your website in an editor like notepad or Dreamweaver and paste below piece of code just after <head>

6.Now in every page of your website, replace static navigation with below provided PHP code and save your all files with .php extension.

7. Now you have added a dynamic navigation to all of your pages. Edit the links in navigation.php file and save it. Links and labels will be updated on all pages.

To make it work, ensure that you name all your webpages as .php extension. For example if the name of your homepage file was index.html, after adding the dynamic navigation menu, change the name as index.php and do it for all other files.

I hope that this simple trick will make your tasks very easy when it comes to edit the navigation. If you need any help, just leave a comment below.