How to use php include with js menu
<p>I am putting together a website and it has a menu system set up in javascript. I dont want to have to update each and every page when the site changes. </p>

<p>I tried using php's <code>include</code> statement to handle that but it won't work. It wont even show basic data.</p>

<h3>index.php</h3>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;?php include('nav.php');?&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
&lt;!--[if IE]&gt;
&lt;style type="text/css"&gt;
#menu li {
position:static;
}
&lt;/style&gt;
&lt;![endif]--&gt;


&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;meta name="description" content="Your description goes here" /&gt;
&lt;meta name="keywords" content="your,keywords,goes,here" /&gt;
&lt;meta name="author" content="Your Name" /&gt;
&lt;link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Droid+Sans|Princess+Sofia' rel='stylesheet' type='text/css' /&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="inland-hembygd.css" /&gt;

&lt;script src="menu.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.nivo.slider.js"&gt;&lt;/script&gt;
&lt;title&gt;Through His Eyes Photography&lt;/title&gt;
&lt;/head&gt;
&lt;link href="drop-down-menu.css" type="text/css" rel="stylesheet" /&gt;
&lt;script src="menu.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body {
    padding:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:62.5%;

}
#container {
    margin:50px auto;
    width:500px;
}
&lt;/style&gt;

&lt;!--[if IE]&gt;
&lt;style type="text/css"&gt;

#menu li {
    position:static;
}

&lt;/style&gt;
&lt;![endif]--&gt;
&lt;body&gt;


&lt;div id="wrapper960" class="clearfix"&gt;












&lt;div id="header" class="clearfix shadow"&gt;
&lt;div id="sitetitle" class="clearfix"&gt;
&lt;h1&gt;&lt;a href="index.html"&gt;Through His Eyes Photography&lt;/a&gt;&lt;/h1&gt;

&lt;br /&gt;&lt;br /&gt;

&lt;!-- CONTAINER --&gt;
&lt;span id="container" &gt;

&lt;!-- NAVIGATION --&gt;
&lt;ul id="menu"&gt;

    &lt;li&gt;&lt;a href="index.php" title="Portraiture Gallery" class="selected"&gt;Portraiture Gallery&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="portraiture/adults.php" title="Adults"&gt;Adults  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/seniors.php" title="Seniors"&gt;Seniors  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/infantsandchildren.php" title="InfantsandChildren"&gt;Infants and Children  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/multiples.php" title="Multiples"&gt;Mutiples  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/hisangels.php" title="Hisangels"&gt;His Angels &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li&gt;&lt;a href="#" title="About us"&gt;The Stork's Arrival&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="portraiture/adults.php" title="Dults"&gt;Adults  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/seniors.php" title="Seniors"&gt;Seniors  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/infantsandchildren.php" title="InfantsandChildren"&gt;Infants and Children  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/multiples.php" title="Multiples"&gt;Mutiples  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/hisangels.php" title="Hisangels"&gt;His Angels &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/li&gt;



    &lt;li&gt;&lt;a href="#" title="Projects"&gt;Triple Braided Cord&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="portraiture/adults.php" title="Adults"&gt;Adults  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/seniors.php" title="Seniors"&gt;Seniors  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/infantsandchildren.php" title="InfantsandChildren"&gt;Infants and Children  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/multiples.php" title="Multiples"&gt;Mutiples  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/hisangels.php" title="Hisangels"&gt;His Angels &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/li&gt;


    &lt;li&gt;&lt;a href="#" title="Contact"&gt;Commercial Gallery&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="portraiture/adults.php" title="Dults"&gt;Adults  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/seniors.php" title="Seniors"&gt;Seniors  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/infantsandchildren.php" title="InfantsandChildren"&gt;Infants and Children  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/multiples.php" title="Multiples"&gt;Mutiples  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/hisangels.php" title="Hisangels"&gt;His Angels &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/li&gt;


    &lt;li&gt;&lt;a href="#" title="boudoir"&gt;Boudoir&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="portraiture/adults.php" title="Dults"&gt;Adults  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/seniors.php" title="Seniors"&gt;Seniors  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/infantsandchildren.php" title="InfantsandChildren"&gt;Infants and Children  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/multiples.php" title="Multiples"&gt;Mutiples  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/hisangels.php" title="Hisangels"&gt;His Angels &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/i&gt;



    &lt;li&gt;&lt;a href="#" title="hdr"&gt;HDR&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="portraiture/adults.php" title="Dults"&gt;Adults  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/seniors.php" title="Seniors"&gt;Seniors  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/infantsandchildren.php" title="InfantsandChildren"&gt;Infants and Children  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/multiples.php" title="Multiples"&gt;Mutiples  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/hisangels.php" title="Hisangels"&gt;His Angels &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/i&gt;



    &lt;li&gt;&lt;a href="#" title="hdr"&gt;Fine Art Gallery&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="portraiture/adults.php" title="Dults"&gt;Adults  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/seniors.php" title="Seniors"&gt;Seniors  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/infantsandchildren.php" title="InfantsandChildren"&gt;Infants and Children  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/multiples.php" title="Multiples"&gt;Mutiples  &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="portraiture/hisangels.php" title="Hisangels"&gt;His Angels &lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/i&gt;

&lt;/ul&gt;
&lt;!-- /NAVIGATION --&gt;    

&lt;/span&gt;
&lt;!-- /CONTAINER --&gt;







&lt;/div&gt;

&lt;div align="center"="header-image"&gt;
&lt;img src="images/main.jpg" alt="" /&gt;
&lt;/div&gt;




&lt;div id="content" class="clearfix shadow" &gt;

&lt;div id="sidebar" class="right" &gt;

&lt;div class="right"&gt;
&lt;h2&gt;Site Navigation&lt;/h2&gt;


&lt;div id="header" class="clearfix shadow"&gt;




        &lt;div id="nav" class="clearfix" align="center"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Default layout&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;
            &lt;ul&gt;
            &lt;li&gt;&lt;a href="2-columns-left.html"&gt;2 columns (left)&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a class="current" href="2-columns-right.html"&gt;2 columns (right)&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="full-width.html"&gt;Full width&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;




&lt;/div&gt;
&lt;/div&gt;


&lt;div id="main" class="left"&gt;
&lt;h2&gt;The Inland CSS template&lt;/h2&gt;
&lt;p&gt;This is Inland, the first in a new series of HTML/CSS templates from &lt;a href="http://andreasviklund.com/"&gt;andreasviklund.com&lt;/a&gt;. It is a multi-layout design, and the first andreasviklund.com template to feature an image slider. Inland is made for template users who want a design that catches the attention of the website visitor and it is suitable for both personal websites and blogs, as well as for professional websites for companies and organizations. Like all templates by Andreas Viklund, it keeps the code simple, making the template easy to customize and build upon. To see the different layout options, click the main menu links above...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div id="footer" class="shadow"&gt;
&lt;p&gt;&amp;copy; 2012 Your Name | &lt;a href="http://andreasviklund.com/templates/inland-hembygd/"&gt;Template design&lt;/a&gt; by &lt;a href="http://andreasviklund.com/"&gt;andreasviklund.com&lt;/a&gt; and &lt;a href="http://allyourbasearebelongtous.se/"&gt;Daniel Carlsson&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Finally the menu.js javascript</p>

<pre><code>// JavaScript Document

// DropDownMenu by Miha Hribar
// http://hribar.info

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function prepareMenu() {
    // first lets make sure the browser understands the DOM methods we will be using
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;

    // lets make sure the element exists
    if (!document.getElementById("menu")) return false;
    var menu = document.getElementById("menu");

    // for each of the li on the root level check if the element has any children
    // if so append a function that makes the element appear when hovered over
    var root_li = menu.getElementsByTagName("li");
    for (var i = 0; i &lt; root_li.length; i++) {
        var li = root_li[i];
        // search for children
        var child_ul = li.getElementsByTagName("ul");
        if (child_ul.length &gt;= 1) {
            // we have children - append hover function to the parent
            li.onmouseover = function () {
                if (!this.getElementsByTagName("ul")) return false;
                var ul = this.getElementsByTagName("ul");
                ul[0].style.display = "block";
                return true;
            }
            li.onmouseout = function () {
                if (!this.getElementsByTagName("ul")) return false;
                var ul = this.getElementsByTagName("ul");
                ul[0].style.display = "none";
                return true;
            }
        }
    }

    return true;
}

addLoadEvent(prepareMenu);
</code></pre>

<p>I am trying to make both the right side and top menus to be added to each page through include statements.</p>
