これは、この質問に対する私の 2 回目の試みですので、ご容赦ください。
どのように JS メニューを php ページに含めますか?
html を含む nav の include ステートメントを実行するたびに、何も表示されません。
index.php には、nav からコードを取得し、menu.js を使用して表示する必要がある include ステートメントがあります。
ここにインデックスからのスニペットがあります
<span id="container" >
<!-- NAVIGATION -->
<ul id="menu">
<?php include('nav.php')?>
</ul>
</span>
ここにnav.phpがあります
<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>
menu.js がそのために書かれているため、この形式に従っています。
menu.js
// 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);