Include a javascript menu using php
<p>This is my second attempt at this question so please bear with me. </p>

<p>How do you include a JS menu into a php page?</p>

<p>whenever I do a include statement for nav which has html in it, nothing shows up.</p>

<p>index.php has an include statment that should take the code from nav and display it using the menu.js</p>

<p>here is snippet from index</p>

<pre><code>    &lt;span id="container" &gt;

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

&lt;?php include('nav.php')?&gt;
            &lt;/ul&gt;
     &lt;/span&gt;
</code></pre>

<p>and here is nav.php</p>

<pre><code> &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;
</code></pre>

<p>this format is followed because the menu.js is written for that.</p>

<p>menu.js</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>
