blog_header_php

PHP – Dynamic Navigation Bar Based on Files in Folder

Thie php script automatically generates a navigation menu based on the pages in the same directory.

The php script does the following:

  • Loops through all the files in the directory looking for php, html and htm files
  • Uses the PHP Simple HTML DOM Parser to find the page h2 title with id=”maintitle”
    Note: you can set it to find any tag on the page
  • It stores the page title and the page URL
  • It alphabetizes the pages and displays the into a <li> list
  • Using jQuery the current <li> item class is set to “active”

Demo uses a modified version of a free template from CSS Heaven

Also made the loopedslider dynamic so it dynamically grabs all the images in the slideshow directory and reads the image metadata for the title and text.

demo


In order for the example to work below you will need to add the following code to each of your web pages. This is what the script looks for and makes it the text part of the sidebar links

  

Your Title

Here is the auto navigation script. I recommend putting it into an include file on all your pages.

auto_navigation.php
<!--
//----------------------------------------------------
// Auto Navigation Scripts
// Created by Jaz Witham (Jazzerup)
// 2011
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND
// Script reads the php, htm and html files in a directory
// and builds a navigation bar.
//----------------------------------------------------
-->

include 'simple_html_dom.php';
 
//Webite URL to that current directory
$dirURL =  dirname("http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']);
 
//get the current folder you are in
$dirpath = getcwd();
 
$folder = opendir($dirpath);
$file_types = array("php", "htm", "html");
$index = array();
$filelist = array();
 
//Loop through the files in the directory
while ($file = readdir ($folder)) {
  if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$file_types))
      {                   
    $html = file_get_html("$dirpath/$file");
  //Checking for a homepage so it always displays first int he list and is not alphabetized with the rest of the files.
  if ($file == "index.php"){
    //$homepgtime = $html---&gt;find('h2[id=maintitle]',0)-&gt;plaintext;
    $homepgtime = "Home";    
  }else{    
    $filelist[] = array('mytitle' =&gt; $html-&gt;find('h2[id=maintitle]',0)-&gt;plaintext, 'mypath' =&gt; $dirURL . "/" . $file);
  }
    }
}
 
//array to sort a 2-dimentional array
function array_qsort2 (&amp;$array, $column=0, $order="ASC") {
  $oper = ($order == "ASC")?"&gt;":"&lt;"; 
  if(!is_array($array)) return;
  usort($array, create_function('$a,$b',"return (\$a['$column'] $oper \$b['$column']);")); 
  reset($array);
}
array_qsort2($filelist, "mytitle", "ASC");
 
//Build the <li> list.  The homepage always listed first
echo "</li><li><a href="index.php" accesskey="1">$homepgtime</a></li>";
 
$j = 1;
//Loop through the rest of the files
for($i=0; $i<sizeof($filelist); $i++)="" {="" $j="$j" +="" 1;="" echo="" "<li=""><a href="%22%20.%20$filelist[$i][" mypath']="" .="" "'="" accesskey="$j">" .$filelist[$i]['mytitle'] . "</a>";
  }
//clean up
closedir($folder);
 
</sizeof($filelist);></pre>

<p><br><br> This jQuery will add the "active" class to the current item in your navigation </p>
<pre xml:html="">$(document).ready(function(){     
  var str = $("#maintitle").text();    
  $('.nav').children().each(function(){
  if (str == $(this).text()) {
    $(this).addClass('active');
  } else { 
    $(this).removeClass('active') }
  });
});

Trackback from your site.

Leave a comment