Hey guys,
I’m having trouble creating a drop down menu. When the page loads up the drop-down menu is hidden then when a user hovers over the menu its supposed to display.
Well my drop-down menu shows as soon as the page loads. Also when i click on the drop-down menu i get this error about “menuID” is not defined in the Firefox console.
Thank you for any help you can give me!
I have uploaded the files here:
I have also included the code below:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The 221B Blog</title>
<link href="shblogtxt.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="menustxt.js"></script>
</head>
<body>
<div id="page">
<form id="searchForm" action="">
<div id="logo">
<img src="logo.jpg" alt="The 221B Blog" />
<input id="searchTxt" type="text" size="20" />
<label for="searchTxt">Search</label>
</div>
<div id="menu1" class="menu">
<a href="#">The Adventures of Sherlock Holmes</a>
</div>
<div id="menu1List" class="menuList">
<ul>
<li><a href="#">A Scandal in Bohemia</a></li>
<li><a href="#">The Red-headed League</a></li>
<li><a href="#">A Case of Identity</a></li>
<li><a href="#">The Boscombe Valley Mystery</a></li>
<li><a href="#">The Five Orange Pips</a></li>
<li><a href="#">The Man with the Twisted Lip</a></li>
<li><a href="#">The Blue Carbuncle</a></li>
<li><a href="#">The Speckled Band</a></li>
<li><a href="#">The Engineer's Thumb</a></li>
<li><a href="#">The Noble Bachelor</a></li>
<li><a href="#">The Beryl Coronet</a></li>
<li><a href="#">The Copper Beeches</a></li>
</ul>
</div>
<div id="menu2" class="menu">
<a href="#">The Memoirs of Sherlock Holmes</a>
</div>
<div id="menu2List" class="menuList">
<ul>
<li><a href="#">Silver Blaze</a></li>
<li><a href="#">The Yellow Face</a></li>
<li><a href="#">The Stock-broker's Clerk</a></li>
<li><a href="#">The "Gloria Scott"</a></li>
<li><a href="#">The Musgrave Ritual</a></li>
<li><a href="#">The Reigate Puzzle</a></li>
<li><a href="#">The Crooked Man</a></li>
<li><a href="#">The Resident Patient</a></li>
<li><a href="#">The Greek Interpreter</a></li>
<li><a href="#">The Naval Treaty</a></li>
<li><a href="#">The Final Problem</a></li>
</ul>
</div>
<div id="menu3" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu3List" class="menuList">
<ul>
<li><a href="#">The Empty House</a></li>
<li><a href="#">The Norwood Builder</a></li>
<li><a href="#">The Dancing Men</a></li>
<li><a href="#">The Solitary Cyclist</a></li>
<li><a href="#">The Priory School</a></li>
<li><a href="#">Black Peter</a></li>
<li><a href="#">Charles Augustus Milverton</a></li>
<li><a href="#">The Six Napoleons</a></li>
<li><a href="#">The Three Students</a></li>
<li><a href="#">The Golden Pince-Nez</a></li>
<li><a href="#">The Missing Three-Quarter</a></li>
<li><a href="#">The Abbey Grange</a></li>
<li><a href="#">The Second Stain</a></li>
</ul>
</div>
<div id="menu4" class="menu">
<a href="#">The Case Book of Sherlock Holmes</a>
</div>
<div id="menu4List" class="menuList">
<ul>
<li><a href="#">The Illustrious Client</a></li>
<li><a href="#">The Blanched Soldier</a></li>
<li><a href="#">The Mazarin Stone</a></li>
<li><a href="#">The Three Gables</a></li>
<li><a href="#">The Sussex Vampire</a></li>
<li><a href="#">The Three Garridebs</a></li>
<li><a href="#">Thor Bridge</a></li>
<li><a href="#">The Creeping Man</a></li>
<li><a href="#">The Lion's Mane</a></li>
<li><a href="#">The Veiled Lodger</a></li>
<li><a href="#">Shoscombe Old Place</a></li>
<li><a href="#">The Retired Colourman</a></li>
</ul>
</div>
<div id="menu5" class="menu">
<a href="#">His Last Bow</a>
</div>
<div id="menu5List" class="menuList">
<ul>
<li><a href="#">Wisteria Lodge</a></li>
<li><a href="#">The Cardboard Box</a></li>
<li><a href="#">The Red Circle</a></li>
<li><a href="#">The Bruce-Partington Plans</a></li>
<li><a href="#">The Dying Detective</a></li>
<li><a href="#">The Disappearance of Lady Frances Carfax</a></li>
<li><a href="#">The Devil's Foot</a></li>
<li><a href="#">His Last Bow</a></li>
</ul>
</div>
<div id="menu6" class="menu">
<a href="#">The Novels</a>
</div>
<div id="menu6List" class="menuList">
<ul>
<li><a href="#">A Study in Scarlet</a></li>
<li><a href="#">The Sign of the Four</a></li>
<li><a href="#">The Hound of the Baskervilles</a></li>
<li><a href="#">The Valley of Fear</a></li>
</ul>
</div>
<ul id="linkList">
<li><a href="#">Home</a></li>
<li class="newGroup"><a href="#">Essays</a></li>
<li><a href="#">Fan Fiction</a></li>
<li><a href="#">Art</a></li>
<li class="newGroup"><a href="#">Discussion Forum</a></li>
<li class="newGroup"><a href="#">Holmes on the Web</a></li>
<li><a href="#">The 221B Museum</a></li>
<li><a href="#">Jeremy Brett Page</a></li>
<li><a href="#">Basil Rathbone Page</a></li>
<li><a href="#">The Baker Street Irregulars</a></li>
<li class="newGroup"><a href="#">Holmes Radio Podcast</a></li>
<li><a href="#">Holmes Audiobooks</a></li>
<li class="newGroup"><a href="#">About Arthur Conan Doyle</a></li>
<li><a href="#">Victorian England</a></li>
<li><a href="#">Strand Magazine</a></li>
<li><a href="#">The Holmes Atlas</a></li>
<li class="newGroup"><a href="#">Other Fictional Detectives</a></li>
<li class="newGroup"><a href="#">About the WebMaster</a></li>
<li><a href="#">Issues Archive</a></li>
</ul>
<div id="main">
<img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" />
<p id="firstp">
The most famous of fictional detectives, Sherlock Holmes
first appeared in print in 1887, in stories written by the Scottish author
and physician, Sir Arthur Conan Doyle. Holmes is famous for his use
of deductive reasoning to solve difficult and complex cases. Almost
all Holmes stories are told in the first-person narration of
Dr. John Watson, Holmes' closest friend and confidant.</p>
<p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes
canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i>,
which chronicled the meeting of Holmes and Watson and covered their
first case together. As Doyle wrote additional tales, the Sherlock Holmes
stories grew in popularity, becoming a regular feature of <i>The
Strand Magazine</i>. Desiring to explore other literary pursuits, Doyle
grew tired of the detective and killed off Holmes in the short story
<i>The Final Problem</i>. However, public acclaim and a desire for more
Holmes stories eventually persuaded Doyle to resurrect the popular
detective, bringing him back in <i>The Adventure of the Empty House</i>.</p>
<p>Doyle's final Holmes story, <i>His Last Bow</i>, appeared in 1914, but
that did not end the public's fascination with Holmes and Watson. Basil
Rathbone brought the character to the silver screen in 14 movies
loosely based on Doyle's original stories. In more recent years,
Jeremy Brett played Holmes to great critical acclaim over four seasons of
the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes
has been played by over 70 actors appearing in over 200 films.</p>
<p>To enjoy online versions of the Sherlock Holmes short stories and novels,
select entries from the menu at the top of this page.</p>
</div>
</form>
</div>
</body>
</html>
* {padding: 0px; margin: 0px; line-height: 1.2}
body {background-color: white;
font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
font-size: 12px}
#page {position: absolute; top: 0px; left: 10px; width: 850px}
a {text-decoration: none; color: black}
p {margin: 15px 0px}
ul {list-style-type: none}
#logo {position: absolute: top: 0px; left: 0px;
width: 100%; height: 108px; background-color: white; z-index: 3}
#logo img {float: left}
#logo label {float: right; margin-top: 15px; margin-right: 10px}
#logo input {float: right; margin-top: 15px; background-color: ivory}
.menu {position:absolute; top: 110px; width: 140px; height: 35px; z-index: 3;
border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
text-align: center}
.menu a {display: block; width: 140px; height: 35px; color: black}
.menu a:hover {background-color: rgb(151, 151, 151); color: white}
#menu1, #menu1List {left: 0px}
#menu2, #menu2List {left: 141px}
#menu3, #menu3List {left: 282px}
#menu4, #menu4List {left: 423px}
#menu5, #menu5List {left: 564px}
#menu6, #menu6List {left: 705px}
.menuList {position: absolute; top: 146px; width: 140px; z-index: 2;
background-color: ivory; border: 1px solid black; display: block}
.menuList li {margin: 5px}
.menuList a {display: block; width: 132px}
.menuList a:hover {background-color: rgb(151, 151, 151); color: white}
#linkList {position: absolute; top: 160px; left: 5px; width: 175px;
border-right: 1px solid black}
#linkList li {line-height: 1.5}
#linkList .newGroup {margin-top: 15px}
#linkList a:hover {text-decoration: underline overline;
color: red; background-color: ivory}
#main {position: absolute; top: 160px; left: 190px; z-index: 1}
#firstp {margin-top: 0px}
#firstp:first-line {font-variant: small-caps; font-weight: bold}
#firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif;
line-height: 0.8; margin: 0px 5px 0px 0px}
window.onload = init;
var activeMenu = null;
var clipHgt = 0;
var timeID;
function init() {
var menus = new Array();
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "menu") menus.push(allElems[i]);
}
for (var i = 0; i < menus.length; i++){
menus[i].onclick = changeMenu;
menus[i].onmouseover = moveMenu;
}
document.getElementById("logo").onclick = closeOldMenu;
document.getElementById("linkList").onclick = closeOldMenu;
document.getElementById("main").onclick = closeOldMenu;
}
function changeMenu() {
// this function changes the pull-down menu displayed in the document
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
function closeOldMenu() {
if (activeMenu) {
clearInterval(timeID);
activeMenu.style.display = "none";
acviveMenu = null;
}
}
function moveMenu() {
// this function moves the pull-down menu from one title to another
if (activeMenu) {
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(MenuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
}
function rollDown() {
clipHgt = clipHgt + 10;
if (clipHgt < 400) {
activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
}else {
clearInterval(timeID);
clipHgt = 0;
}
}