Pages

Navigation System or Template with PHP and jQuery

Thursday, May 24, 2012
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 at
Labels:

12 comments:

  1. UnknownMay 30, 2012 at 11:44 PM

    Thank you for sharing this, I'm building a CI template, and this has given me some good ideas.

    ReplyDelete
  2. SuseelaJuly 30, 2016 at 7:36 AM




    That is very interesting; you are a very skilled blogger. I have shared your website in my social networks..!


    Online Reputation Management

    ReplyDelete
  3. VarshaaSeptember 16, 2016 at 4:19 AM


    What an awesome post, I just read it from start to end. Learned something new after a long time.


    Car Cleaning Services in Mumbai


    back to original car services

    ReplyDelete
  4. AnonymousJune 26, 2017 at 2:19 AM

    Really Good article.provided a helpful information .keep updating...
    E-mail marketing company in india

    ReplyDelete
  5. Ancy merinaFebruary 16, 2018 at 1:14 AM

    This comment has been removed by the author.

    ReplyDelete
  6. Pallavi karthiJune 20, 2018 at 2:49 AM

    This information really worth saying, i think you are master of the content and thank you so much sharing that valuable information and get new skills after refer that post.
    Journal Of Computer Science
    Journal Of Management
    Plagiarism service
    Engineering Journal
    Journal Of Chemistry

    ReplyDelete
  7. tutorialJanuary 8, 2019 at 3:16 AM

    Simple Laravel Login Registration

    ReplyDelete
  8. DevJanuary 19, 2019 at 9:20 AM

    PHP Payment Gateway Integration

    ReplyDelete
  9. Chandra Sekhar ReddyOctober 21, 2019 at 3:23 AM

    Good information
    "Sanjary Academy provides excellent training for Piping design course. Best Piping Design Training Institute in Hyderabad,
    Telangana. We have offer professional Engineering Course like Piping Design Course,QA / QC Course,document Controller
    course,pressure Vessel Design Course, Welding Inspector Course, Quality Management Course, #Safety officer course."
    Piping Design Course
    Piping Design Course in India­
    Piping Design Course in Hyderabad
    QA / QC Course
    QA / QC Course in india
    QA / QC Course in Hyderabad
    Document Controller course
    Pressure Vessel Design Course
    Welding Inspector Course
    Quality Management Course
    Quality Management Course in india
    Safety officer course

    ReplyDelete
  10. unknownApril 26, 2021 at 8:52 AM

    HVAC & Plumbing Services
    Air Star Heating guarantees reliability and quality for all equipment and services.

    Air Star Heating specialists always try to deliver the most excellent quality of services to our customers at an affordable price. It is understood that every client has different needs and different problems. We try to accomplish the needs of every client according to their requests. We are having considerable experience in this field. Our specialists understand very well how things work. It doesn’t matter in which field of industry you are looking for services.
    Plumbing & HVAC Services in San Diego. Call now (858) 900-9977 ✓Licensed & Insured ✓Certified Experts ✓Same Day Appointment ✓Original Parts Only ✓Warranty On Every Job.
    Visit:- https://airstarheating.com

    ReplyDelete
  11. TomFebruary 15, 2022 at 1:17 PM

    Thank you The foreign visitors need to apply for visa to Kenya online. That offers them fast and secure Kenyan visa on arrival services. You also can check the al information regarding to visa here to get in the Kenya.

    ReplyDelete
  12. Mansi DevganMarch 27, 2022 at 4:46 AM

    I am very thankful to you for providing such a great information. It is simple but very accurate information.

    BCom First Year Time Table PDF

    ReplyDelete

Subscribe to: Post Comments (Atom)