Flexible Levels Navigation Menu with JavaScript and PHP

If you are looking for JavaScript and/or CSS driven navigation menus you'll find a lot of examples using search machines. If you search for database driven navigation menus in combination with JavaScript and CSS the choice will be notedly smaller. The Flexible Levels Navigation Menu with JavaScript and PHP (see screenshots below) solves this problem. It allows you to set three menu levels, making the choice between onmouseover or onclick action and provides the possibilty to place the navigation on a single (with different content) or on several web page(s) - thanks to pointers the navigation knows always where the user action was headed to. This application goes without the use of ul-li and DOM method, but relies on the element div and a synchronization script, which controls the style display options none and block. Because of that feature search engines can be addressed with better propect of success - all the navigation content is present but not visible.

The scripts snippets you see here (the complete script is downloadable) is only a small part of the complete application. That's it. All stuff is all prepared for your convenience (example and class-files included). Best regards Claudio Biesele


Part of the Elements Creation Code:

$content = new NaviContent('1',$pid,$lavid,$lbvid);
$onload = $content->validGetNavigationVars();
$content->showRecordsForMainNavigation();



Part of the Class Code:

public function validGetNavigationVars() {
  if ($this->lavid != null && $this->lbvid == null) {
    $this->onload = "onload=\"initNavigation('$this->lavid')\"";
  } elseif ($this->lavid != null && $this->lbvid != null) {
    $this->onload = "onload=\"initSubNavigation('$this->lbvid','$this->lavid')\"";
  } else {
    $this->lavid = null;
    $this->lbvid = null;
    $this->onload = null;
  }
return $this->onload;
}


Picture picture_1.jpg
Navigation in starting position.
Picture picture_2.jpg
Navigation with only one second and one third level.
Picture picture_3.jpg
Navigation with multiple second, but no third levels.
Picture picture_4.jpg
Navigation with multiple second and third levels.
Download the full script at www.fastproject.ch. The downloaded script is free from Copyright restrictions, Zurich, 28th of March 2012.
Donate with PayPal:
placeholder