私はウェブサイトをまとめており、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>© 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 ステートメントを使用して、右側と上部の両方のメニューを各ページに追加しようとしています。