Drop Down Menu issues

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

Code:

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>
<!-- 
   
   The 221B Blog
   Author:           JNeal
   Date:             3/1/2011

   Filename:         holmes.htm
   Supporting files: menus.js, shblog.css

-->
   <title>The 221B Blog</title>
   <link href="shblog.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="menus.js"></script>
</head>

<body>
	<!-- Menu List -->
   <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>

	<!-- Activates Javascript -->
	<script type="text/javascript">
		init();
	</script>
	
	<!--Body -->
	<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

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

   The 221B Blog
   Author:           JNeal
   Date:             3/1/2011

   Filename:         holmes.htm
   Supporting files: menus.js, shblog.css

-->
   <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>
	<!-- Menu List -->
   <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>

	<!-- Activates Javascript -->
	<script type="text/javascript">
		init();
	</script>

	<!--Body -->
	<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.

Thread: Drop Down Menu issues

Thread Tools

Search Thread

Drop Down Menu issues

Bookmarks

Bookmarks

Posting Permissions