Drop Down Menu issues [Archive] - Dynamic Drive Forums

JNeal33

04-14-2010, 01:26 AM

I created a drop down menu that when hover over the menu titles by the mouse it displays the drop down list for that specific title. How do i get it to disappear when the mouse is off the menu titles and menu list. right now when u move the pointer off the titles the drop down list disappears also so you can not select a item in the drop down list.

Below is my HTML, Javascript, and CSS code. Any Tips would help

HTML CODE:

<?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="shblog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="menus.js"></script>
</head>

<body>

<div id="page">
<form id="searchForm" action="">

<div id="menu1" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu1List" 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="menu2" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu2List" 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>


<script type="text/javascript">
init();
</script>


<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>

</body>
</html>

Javascript:

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].onmouseover = changeMenu;
menus[i].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";
activeMenu = null;
}
}

function rollDown() {
clipHgt = clipHgt + 10;
if (clipHgt < 400) {
activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
} else {
clearInterval(timeID);
clipHgt = 0;
}
}

CSS:

* {padding: 0px; margin: 0px; line-height: 1.2}

ul a {color: black; text-decoration: none}

a {color: black; text-decoration: none}

#main {position: absolute; top: 50px; left: 20px}

body {background-color: white;
font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
font-size: 12px}

#page {position: absolute; top: 0px; left: 10px; width: 880px}
p {margin: 15px 0px}
ul {list-style-type: none}

.menu {position:absolute; top: 0px; 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: 36px; width: 140px; z-index: 2;
background-color: ivory; border: 1px solid black; display: none}

.menuList li {margin: 5px}
.menuList a {display: block; width: 132px}
.menuList a:hover {background-color: rgb(151, 151, 151); color: white}

BLiZZaRD

04-14-2010, 01:39 AM

Sorry, maybe it's my long day, but I don't understand.. you want it to disappear when you take the mouse off the menu, but it already does that?

How do i get it to disappear when the mouse is off the menu titles and menu list. right now when u move the pointer off the titles the drop down list disappears

JNeal33

04-14-2010, 04:22 AM

it does move off but the drop down list does not disappear when you take the mouse off completely, it just hangs there. the hover back and forth works. but lets say you want to read the text, the drop down list is this there

vwphillips

04-14-2010, 11:35 AM

<?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="shblog.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
* {padding: 0px; margin: 0px; line-height: 1.2}

ul a {color: black; text-decoration: none}

a {color: black; text-decoration: none}

#main {position: absolute; top: 50px; left: 20px}

body {background-color: white;
font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
font-size: 12px}

#page {position: absolute; top: 0px; left: 10px; width: 880px}
p {margin: 15px 0px}
ul {list-style-type: none}

.menu {position:absolute; top: 0px; 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: 36px; width: 140px; z-index: 2;
background-color: ivory; border: 1px solid black; display: none}

.menuList li {margin: 5px}
.menuList a {display: block; width: 132px}
.menuList a:hover {background-color: rgb(151, 151, 151); color: white}
/*]]>*/
</style>
<script type="text/javascript" >
var activeMenu = null;
var clipHgt = 0;
var timeID,timeID2;

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 obj,i = 0; i < menus.length; i++) {
menus[i].onmouseover = changeMenu;
menus[i].onmouseout = function(){ MseOut(); }
menus[i].onclick = closeOldMenu;
obj=document.getElementById(menus[i].id+'List');
obj.onmouseout = function(){ MseOut(); }
obj.onmouseover = function(){ clearTimeout(timeID2); }
}

// document.getElementById("main").onclick = closeOldMenu;
}
function MseOut() {
if (activeMenu) {
timeID2 = setTimeout(function(){activeMenu.style.display = "none"; }, 500);
}
}

function changeMenu() {
// this function changes the pull-down menu displayed in the document
clearInterval(timeID);
clearInterval(timeID2);
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";
activeMenu = null;
}
}

function rollDown() {
clipHgt = clipHgt + 10;
if (clipHgt < 400) {
activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
} else {
clearInterval(timeID);
clipHgt = 0;
}
}

</script>
</head>

<body>

<div id="page">

<div id="menu1" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu1List" 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="menu2" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu2List" 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>


<script type="text/javascript">
init();
</script>


<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>
</body>
</html>

JNeal33

04-16-2010, 05:12 AM

Thank you guys, I really appreciate it.. last question: do i have to leave any info in my html code telling that dynamicdrive.com helped?? this site will most likely not be hosted, more of an experiment but I may use the JavaScript for my other websites.

Thanks again.
Jake

djr33

04-16-2010, 05:43 AM

It's a requirement of the use that the notice is in the code. It's not that dynamic drive 'helped' (answering your questions, etc.) but that dynamic drive owns the copyright to the code you are using-- the only condition is that there's a credit notice in the page's source code. Of course if this is just a test project (not online, etc.) it doesn't really matter, but it's probably best to leave it there if you want to borrow from that page later and forget to add it back, etc.