如何使用php包含js菜单

时间:2012-06-29 17:13:55

标签: php javascript

我正在组建一个网站,它有一个用javascript设置的菜单系统。我不希望在网站更改时更新每个页面。

我尝试使用php的include语句来处理它,但它不起作用。它甚至不会显示基本数据。

的index.php

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


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

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

}
#container {
    margin:50px auto;
    width:500px;
}
</style>

<!--[if IE]>
<style type="text/css">

#menu li {
    position:static;
}

</style>
<![endif]-->
<body>


<div id="wrapper960" class="clearfix">












<div id="header" class="clearfix shadow">
<div id="sitetitle" class="clearfix">
<h1><a href="index.html">Through His Eyes Photography</a></h1>

<br /><br />

<!-- CONTAINER -->
<span id="container" >

<!-- NAVIGATION -->
<ul id="menu">

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

    </ul>
    </li>

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

    </ul>
    </li>



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

    </ul>
    </li>


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

    </ul>
    </li>


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

    </ul>
    </i>



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

    </ul>
    </i>



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

    </ul>
    </i>

</ul>
<!-- /NAVIGATION -->    

</span>
<!-- /CONTAINER -->







</div>

<div align="center"="header-image">
<img src="images/main.jpg" alt="" />
</div>




<div id="content" class="clearfix shadow" >

<div id="sidebar" class="right" >

<div class="right">
<h2>Site Navigation</h2>


<div id="header" class="clearfix shadow">




        <div id="nav" class="clearfix" align="center">
            <ul>
                <li><a href="index.html">Home</a></li>

            </ul>
            <ul>
                <li><a href="index.html">Default layout</a></li>

            </ul>
            <ul>
            <li><a href="2-columns-left.html">2 columns (left)</a></li>

            </ul>
            <ul>
                <li><a class="current" href="2-columns-right.html">2 columns (right)</a></li>
            </ul>
            <ul>
                <li><a href="full-width.html">Full width</a></li>
            </ul>
        </div>
    </div>




</div>
</div>


<div id="main" class="left">
<h2>The Inland CSS template</h2>
<p>This is Inland, the first in a new series of HTML/CSS templates from <a href="http://andreasviklund.com/">andreasviklund.com</a>. 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...</p>
</div>
</div>

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

</body>

</html>

最后是menu.js javascript

// 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 < root_li.length; i++) {
        var li = root_li[i];
        // search for children
        var child_ul = li.getElementsByTagName("ul");
        if (child_ul.length >= 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);

我试图通过include语句将右侧菜单和顶级菜单添加到每个页面。

1 个答案:

答案 0 :(得分:1)

您将nav.php包含在页面的HTML上方。将包含语句放在您希望导航显示的位置。在nav.php内,您应该只有要插入该位置的HTML。它实际上是将代码放在文件中,并将其放在您拥有include语句的位置。