Navigation System Or Template With Php And Jquery

Navigation System Or Template With Php And Jquery Codeigniter Navigation System Or Template With Php And Jquery

In this tutorial I will explain you how to create a navigation system or dynamic menu system or simple template system by using php include function, $_SESSION and some jQuery function.

Below screenshot is our latest view.

In this tutorial we will create 7 files like below.

You can see demo here.

Demo

1. header.php - It is a header part of our template. It will also include main menu.
2. jquery.js - It is a jquery library file downloaded from jQuery and rename it as jquery.js.
3. style.css - It is a style sheet for our site.
4. index.php - It will load firstly when we run our site or it is our home page.
5. footer.php - It is a footer part of our template.
6. projects.php - It is a other content file.
7. about.php - It is another content file.

Our page source code will be look like this before using php include function.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <script type="text/javascript" src="jquery.js"></script> <title>Home</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>Your Site Name</h1> </div><!-- end of header--> <ul id="main_nav"> <li><a id="home" href="index.php">Home</a></li> <li><a id="projects" href="projects.php">Projects</a></li> <li><a id="about" href="about.php">About Us</a></li> </ul> <div id="content"> <h1>Welcome to our Site.</h1> Your content will be here. </div> <div id="footer"> Created by <a href="http://www.webinone.net">WebInOne</a> </div><!-- end of footer--> </div><!-- end of wrapper--> </body> </html>

When we create a website, we will have many pages like above code. In every page, header part and footer part will be present. So we should create the separate file for this duplicate code as header.php and footer.php. The only thing we need to change is content part. So our index.php file will be look like this.

<?php include("header.php"); ?> <div id="content"> <h1>Welcome to our Site.</h1> Your content will be here. </div> <?php include("footer.php"); ?>

I will explain you about the header.php and footer.php in a moment. Now we need to add some code to our index.php to set the title and menu item dynamically by using php $_SESSION.

<?php session_start(); $_SESSION['title']='Home'; $_SESSION['menu']='home'; include("header.php"); ?> <div id="content"> <h1>Welcome to our Site.</h1> Your content will be here. </div> <?php include("footer.php"); ?>

Our header.php will look like below. I also add some jquery code to highlight the current location on main menu.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <script type="text/javascript" src="jquery.js"></script> <title><?php echo $_SESSION['title']; ?></title> <script type="text/javascript"> function getMenuVar() { var route=document.getElementById("for_current").value; return route; } $(document).ready(function() { route = getMenuVar(); if (route == 'home') { $('#home').addClass('current'); } else if (route == 'projects') { $('#projects').addClass('current'); } else if (route == 'about') { $('#about').addClass('current'); } else { $('#home').addClass(''); } }); </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>Your Site Name</h1> </div><!-- end of header--> <input type="hidden" id="for_current" value="<?php echo $_SESSION['menu']; ?>" name="for_current" /> <ul id="main_nav"> <li><a id="home" href="index.php">Home</a></li> <li><a id="projects" href="projects.php">Projects</a></li> <li><a id="about" href="about.php">About Us</a></li> </ul>

As you see in above code, we show our title dynamically by using $_SESSION['title']. And I also add a hidden input field above the main navigation ul coed to echo our $_SESSION['menu']. To grab our menu data from this field, I create a javascript function named getMenuVar(). Because we need to use this data in our jquery code to set the css current class in our main menu dynamically.

Below is our footer.php.

<div id="footer"> Created by <a href="http://www.webinone.net">WebInOne</a> </div><!-- end of footer--> </div><!-- end of wrapper--> </body> </html>

Below is our style.css.

*{ margin:0px; padding:0px; } #wrapper{ width: 960px; margin: 0 auto; background-color: #E9E9E9; } #header{ height: 70px; padding-top:20px; } #main_nav { width: 100%; height:37px; background: #A0A0A4; margin: 0; padding: 0; } #main_nav li { list-style: none; float: left; } #main_nav li:first-child { margin-left: 10px; } #main_nav a { line-height: 100%; font-weight: bold; color: #fff; display: block; padding: 10px 15px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.5); } #main_nav a:hover { color: #fff; background: #808080; } .current{ color: #fff; background:#EC7117; } #content{ min-height:100px; background:#FFFBF0; margin:0px; } #footer { clear: both; color: #ccc; height:50px; background:#A0A0A4; } #footer a { color: #fff; }

Blow is our projects.php. We need to set our $_SESSION['title'] and $_SESSION['menu'].

<?php session_start(); $_SESSION['title']='Projects'; $_SESSION['menu']='projects'; include("header.php"); ?> <div id="content"> <h1>Our projects list</h1> Your projects will be here. </div> <?php include("footer.php"); ?>

The latest file we need crate is about.php.

<?php session_start(); $_SESSION['title']='About'; $_SESSION['menu']='about'; include("header.php"); ?> <div id="content"> <h1>About Us</h1> About your company. </div> <?php include("footer.php"); ?>

You can download entire source code here.
Download Source Code

Posted by Hodie J

Navigation System Or Template With Php And Jquery

2 Responses to "Navigation System Or Template With Php And Jquery"

Contact