Learn VBA & Macros in 1 Week!

JavaScript - Need Help Coding Hover Menus?

Full Excel VBA Course - Beginner to Expert

Need Help Coding Hover Menus?	View Content

This is my website:

http://serenityvalley.org/rattery/

As you can see to the left is my menu. I didn't want my menu being so long and going down so far. I wanted to make it so that where it says "Our Girls" and "Our Boys", you could hover over the words, and they would drop down the little menus which contain the links to all the girls and boys pages.

I don't want people jut throwing a line of code at me, but I actually want help explaining how the code does what it does, how I incorporate it into the site.

I've had people just throw lines of text at me without telling me where the text actually goes, like if its CSS, I don't know how CSS works. So I need help telling me what goes where...

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

How Could I Do Menus Like This? Really Cool Dropdown Menus (link Inside)

Sliding Menus Fix

Need Help With Stuck Menus

Need Menus Like This Site

Two Javascript Menus

Drop-down Menus

Help With Javascript Menus

Help With Drop Down Menus?

Need Help Pull Down Menus

Spry Menus And Other Js Not Working

Menus Open Different In Different Browsers

Dynamic Drop Down Menus

Javascript Menus And Slideshows

Need Help Putting 2 Menus On 1 Page

Slide Menus Not Working?

Dynamic Dropdown Menus

Drop Down Menus And Images

Interconnected Dropdown Menus From Xml

Right Click / Context Menus / Firefox 3.6

Help! Creating Multiple Date Menus

Learn VBA & Macros for Excel in 1 Week!

How Could I Do Menus Like This? Really Cool Dropdown Menus (link Inside)

Similar Tutorials

Hello,

I REALLY like the dropdown menus that are on the Patagonia website. How difficult would this be to replicate? Is there a write-up or tutorial somewhere I can read and learn how to do this?

Any help would be greatly appreciated,
Thanks

Here is the link:

http://www.patagonia.com/web/us/home

Sliding Menus Fix

Similar Tutorials

I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them.

I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out!

Can anyone help at all? Here's my javascript code.

Code:

<script type="text/javascript">

var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;

function reveal(obj) {

	if(curVisible != null) {
		oldObject = curVisible;
	}

	if(!inMotion) {
		curVisible = obj;		
		pusher = -100;
		pushBack = 40;
		document.getElementById(obj).style.visibility = "visible";
		document.getElementById(obj).style.bottom = pusher+"px";
		animateOut();
		animateIn();
	}
}

function hide() {
	animateIn();
}


function animateIn() {
	if (pushBack > -100) {
		inMotion = true;
		pushBack -=4;
		document.getElementById(oldObject).style.bottom = pushBack+"px";
		setTimeout(animateIn, 20);
	} else {
		document.getElementById(oldObject).style.visibility = "hidden";
		inMotion = false;
	}
}


function animateOut() {
	
	if(pusher < 40) {
		inMotion = true;
		pusher += 4;
		document.getElementById(curVisible).style.bottom = pusher+"px";
		setTimeout(animateOut, 20);
	} else {
		inMotion = false;
	}
}

</script>

Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought.

Dave

Need Help With Stuck Menus

Similar Tutorials

I would love some help on this code I was assigned to debug...I never studied javascript nor have ever coded really, yet my boss(im volunteering at a company) is having me debug a website and I can't seem to figure this out.

The problem is the menus stay expanded when the mouse is out, but when you activate the onMouseOver, it fixes it.

Here is an extremely simplified version but it shows the problem. And I greatly appreciate any help I can get. Thanks in advance!

Oh and I didn't write any of this + im a noob at coding so if the answer was explained with this in mind that'd be great!

-----------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Yep</title>

<link href="ReferenceFunctions.css" rel="stylesheet" type="text/css" />




<script type="text/javascript">
function ManageTabPanelDisplay() {
//
// Between the parenthesis, list the id's of the div's that
// will be effected when tabs are clicked. List in any
// order. Put the id's in single quotes (apostrophes)
// and separate them with a comma -- all one line.
//
var idlist = new Array('tab1focus','tab2focus','tab3focus','tab1ready','tab2ready','tab3ready','content1','content2', 'content3');

// No other customizations are necessary.
if(arguments.length < 1) { return; }
for(var i = 0; i < idlist.length; i++) {
var block = false;
for(var ii = 0; ii < arguments.length; ii++) {
if(idlist[i] == arguments[ii]) {
block = true;
break;
}
}
if(block) { document.getElementById(idlist[i]).style.display = "block"; }
else { document.getElementById(idlist[i]).style.display = "none"; }
}
}

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>


<script type="text/javascript">

</script>


<script type="text/javascript">

function decide() {

if (document.myca.search.value.length < 1) {
window.alert ("Please enter a search keyword.");
return false;
}

if (document.myca.whosearch[0].checked) {
document.myca.sSearchString.value = document.myca.search.value;
document.myca.submit();

} else {
if (document.myca.whosearch[1].checked) {
document.thissite[1].value = document.myca.search.value;
document.thissite.submit();

} else {
alert("You must select whether you want to search My CA or This Site.");
}

}

return false;
}
</script>


<script type="text/javascript">




</script>


<style type="text/css">

.blueLink {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000066;
font-size: 71%;
}
.Office_functions_sub_title {
font-size: xx-small;
color: #0066CC;
}
.style1 {
font-size: small
}
.pixel_height {
font-size: 5px;
}
.blank_menu_space_height {
font-size: 5px;
font-family: Arial;
}
.turquoise {
color: #00FFCC
}
.blue_font {
color: #0000FF;
font-size: small;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
.style7 {color: #000066}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style11 {
font-size: 12px
}
.style12 {font-size: 14px}
.style13 {font-size: 65%}
.style14 {font-size: 12px; color: #800000; }
.style15 {
color: #FFFFFF;
font-weight: bold;
font-size: small;
}
.style17 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #4d7fb2;
font-weight: bold;
}
.style19 {
font-family: "Times New Roman", Times, serif;
font-size: 18pt;
color: #FFFF00;
}
.style22 {font-size: 11px}
</style>

</head>
<body onload="FP_preloadImgs(/*url*/'images/button13.jpg', /*url*/'images/button4a.jpg'); MM_preloadImages('indeed.jpg' )">


<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>



</tr>


<tr>
<td style="height:17px"><div align="center" class="style15">
<table width="100%" border="1">
<tr>
<td><div align="center">link</div></td>
</tr>
</table>
</div></td>
</tr>


<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">
<tr>
<td valign="top" style="padding-left:12px; text-align:left; line-height:186%;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">

<tr>
<td rowspan="72" valign="top"><table border="0" cellspacing="0" cellpadding="0" style="background-color:#fff">

<tr>
<td valign="top" style="padding-right:12px"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="185" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="9px"></td>
</tr>
<tr>
<td class="boxtitle style12">testings12345</td>
</tr>

<tr>
<td><div class="left_column_top">
<dl id="menu">

<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>


<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre();">
<ul>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm">link</a></li>
</ul>
</dd>


<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <a href="link.htm"> link</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <a href="ble.htm" style="line-height: 200%"> link<br />
link
</a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="link233link.htm"> link</a></li>
<li><a href="indeedy.htm"> link</a></li>
<li><a href="training/linsks.htm"> link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"> <a href="yep.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"> <a href="indeed.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"> <a href="thanks.htm"> link</a></dt>
</dl>
</div></td>
</tr>

</table></td>
</tr>
<td><table width="185px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40px"></td>
</tr>
<tr>
<td class="boxtitle style12">link</td>
</tr>

<tr>
<td><div class="left_column_bottom" style="height:125px">
<dl id="menu">

<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
<a href="yes.htm">link</a></dt>

<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">
<a href="yep.htm">random words</a></dt>

<dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();"> <a href="tests.htm">
<p style="line-height: 200%; margin-top: 1px; margin-bottom: 1px">
ble<br> mhm</p></a></dt>

<dt onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
<a href="communication/testsss.htm">Just some test</a></dt>

</dl>
</div></td>
</tr>
<tr>
<td > </td>
</tr>

</table></td>
</tr>

<tr>

<td align="center">
<p align="center" id="legal">
<a href="#heading"></a></p> </td>
</tr>


</table></td></tr>


</table>
<p align="center">
</table>

<a href="#heading"> Back to Top</a><br />
</td>
</tr>
</table>
</td>
</tr>



</p>
<tr>
<td style="height:1px ;background-color:#CCCCCC"></td>
</tr>
</body>
</html>

Need Menus Like This Site

Similar Tutorials

I want to make a menu like this web site :http://www.petrobras.com.br/pt/
When your move the cursor on it , a new windows open and there is a picture in left side and submenues in right side

I myself think it is a jquery tool but I don't know how to make some thing like this

How can I do so ?

thanks

Two Javascript Menus

Similar Tutorials

Hi everyone,

I am very new to javascript & web editing in general, so I apologize if this is a silly question.

I am designing a site using this menu:
http://dynamicdrive.com/dynamicindex1/slideinmenu.htm

I would like to have two of these menus on the page. Ideally, each will pop out on a rollover. Currently, when I copy and paste the code, only one works (and pops out no matter which menu is rolled over).

How do I need to change the code so that both will work independently of each other on the same page? The CSS styling will be the same for both, however they will have different menu items.

Thank you in advance!!!

Drop-down Menus

Similar Tutorials

Hi All,

Hope someone can help me with this.

I have been using a free javascript code to make some drop-down menus.

this is the link for the code on dynamic drive. http://www.dynamicdrive.com/dynamici...anylinkcss.htm

The script works fine and I have been using it for a while now. However, one of the websites that I run has just asked me to include a sub menu on one of the menu items.

I have managed to get the sub menu to show as requested by using the normal drop down menu and adding a Quote:
rev="lr"
and giving it another class and rel. However, When the link is hovered over the menu appears to the side as expected but when you move onto that "sub-menu" the original menu disappears. can anyone suggest what changes I would need to make so that the first menu does not disappear?

Any help would be greatly appreciated.

As you can tell I am new to JavaScript (hence the use of free codes)

Help With Javascript Menus

Similar Tutorials

Hello, i am trying to implement JavaScript menus for my website. I've used a ready-made one from apycom.
The menu works fine, however the problem is that whenever i try to have more than one of the same menu, the second menu does not work.

I'm generally a PHP coder, and i'm not very useful when it comes to JavaScript, so please excuse me. I'll bring some code into this:

Quote:
<div id="menu">
<ul class="menu" id="menu">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>

<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="menu">
<ul class="menu" id="menu2">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>

<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
You can ignore the hrefs, there for local use. I'm under the impression the identities of each menu is duplicated, but i'm not sure how to allow separation of identities. The second menu works, mouseover the menu comes up but the fade effect does not work.
Can someone please help?
Thank you.

Help With Drop Down Menus?

Similar Tutorials

Hello! I am currently using this code on a webpage that lists the site members.

Code:

function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}[

For some reason, and maybe this is the function of it (I am not sure,) when you click 'characters' on the tables lower down on the page, you are sent to the top of the page again.

Here is the page in question, if it's necessary: http://oursideofthemountain.webs.com/members.htm

Any help in this matter would be greatly appreciated! I am very new to Javascript, so please be patient with me!

Need Help Pull Down Menus

Similar Tutorials

Spry Menus And Other Js Not Working

Similar Tutorials

I've built a site with DW4 and the spry menus are not working. they worked for a little while and then I changed something in the JS menu on the template and now none of the spry works on my site.

also, I imbedded a google gadget and that didn't show up either!

any help would be appreciated. thx:

Menus Open Different In Different Browsers

Similar Tutorials

Take a look at this - http://s385506566.websitehome.co.uk/

If it is ran in either chrome or safari it acts as it should (the sub menus open below the nav bar)

but in IE and Firefox it is very different and a problem (the sub menus open Above! the nav bar)

Any Ideas?

Dynamic Drop Down Menus

Similar Tutorials

Hi,

I am trying to use JavaScript for several linked drop down menus. The contents of the first drop down menu is defined in the code of the form, however, I do not know the best way to populate the following drop down menus depending on the selection of the previous.

I have something working with the following JavaScript code, however as there are lots of options I am not sure whether this is the best way of doing this.

Code:

 <script type="text/javascript">

function setYear(chosen, selbox) {
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select a year',' ');
setTimeout(setYear(' ',document.question.subject),5);
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('exam1','11');
  selbox.options[selbox.options.length] = new
Option('exam2','12');
selbox.options[selbox.options.length] = new
Option('exam3','13');
selbox.options[selbox.options.length] = new
Option('exam4','14');
selbox.options[selbox.options.length] = new
Option('exam5','15');
setTimeout(setYear('11',document.question.subject),5);

}




if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('exam6','twoone');
  selbox.options[selbox.options.length] = new
Option('exam7','twotwo');
 selbox.options[selbox.options.length] = new
Option('exam8','twothree');
 selbox.options[selbox.options.length] = new
Option('exam8','twofour');
 selbox.options[selbox.options.length] = new
Option('exam9','twofive');
 selbox.options[selbox.options.length] = new

}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('exam10','threeone');
  selbox.options[selbox.options.length] = new
Option('exam11','threetwo');
  selbox.options[selbox.options.length] = new
Option('exam12','threethree');
  selbox.options[selbox.options.length] = new

}


if (chosen == "11") {
  selbox.options[selbox.options.length] = new
Option('subject1','111');
}


}


</script>

This is what I have in the form:
Code:

   
        <td>Minimum DBS Year: </td><td colspan="2">
     <select name="DBSyear" onchange="setYear(document.question.DBSyear.options
[document.question.DBSyear.selectedIndex].value,
document.question.exam);">
<option value=" " selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
		</tr>
		<tr>
		<td>
		Exam Paper:
		</td>
		<td>
		 <select name="exam" onchange="setYear(document.question.exam.options
[document.question.exam.selectedIndex].value,
document.question.subject);">
<option value=" " selected="selected">Please select a year</option>
</select>
</td>
		</tr>
		<tr>
		<td>
		Subject:
		</td>
		<td>
		<select name="subject" size="1">
<option value=" " selected="selected">Please select an exam</option>
</select>
		</td>
		</tr>

How would I populate the drop down menus from tables in the database and filter the options depending on the previous drop down selection??

I would appreciate any help!

Javascript Menus And Slideshows

Similar Tutorials

Hi, I am wanting to do menus and image slideshows using javascript because my existing flash menus and slide shows no longer work on many newer devices.
To save time learning all about Javascript, I purchased WoW Slider and Apycom Menus, two programs that do it all for you. Independantly both programs work perfectly, however if I use both programs together on the same website, as soon as I add my image slider it messes up my menu for that page. the menu item colours and bouncy effects when I do a mouseover on menu items no longer work correctly.
Example http://www.dorset-self-catering.com note the menu working correctly on mouseover, then go to second page called "Information", this page also has a slideshow and if you now do a mouseover on the menu, you will see that all the nice properties no longer work.
Is anyone able to offer some advice please.

David Priest

Need Help Putting 2 Menus On 1 Page

Similar Tutorials

Hi,
I'm using this to put menus on my website

http://simplythebest.net/scripts/DHT...script_79.html

at the top it says its capable of having more than one menu on a page, but it doesnt give the directions.
The website it links to for more help is dead.

Can anyone help me out?

Slide Menus Not Working?

Similar Tutorials

The menus are supposed to come out from the side, as an animation. I thought I had the correct code but for some reason it isn't working.

Could anyone take a look at my Javascript at let me know what I'm doing wrong?

Thanks...

Here are my files:

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>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   The 221B Blog
   Author:          
   Date:   March 6, 2011          

   Filename:         sherlock.htm
   Supporting files: logo.jpg, mblog.css, sh.jpg, slides.js

-->
   <title>The Works of Sherlock Holmes</title>
   <link href="mblog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="slides.js"></script>

   <!--[if IE]>
      <style type="text/css">
         /* IE-specific styles to ensure list of links is 
            rendered properly */

         #linkList ul li   {float: left; width: 100%}
         #linkList ul li a {height: 1%} 
      </style>
   <![endif]-->

</head>

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

      <div id="head">
         <img src="logo.jpg" alt="The 221B Blog" />
         <input id="searchTxt" type="text" size="20" />
         <label for="searchTxt">Search</label>
      </div>

      <div id="linkList">
      <ul>
         <li><a href="#">Home</a></li>

         <li><ul class="newGroup">
            <li class="slideMenu">
               <a href="#" class="pTitle">The Adventures of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list1">
                 <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>
            </li>
         </ul></li>
                                                     
         <li><ul>            
            <li class="slideMenu">
               <a href="#">The Memoirs of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list2">
                  <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>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Return of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list3">
                  <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>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Case Book of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list4">
                  <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>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">His Last Bow 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list5">
                  <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>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Novels 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list6">
                  <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> 
            </li>
         </ul></li>

         <li><ul class="newGroup">
            <li class="slideMenu">
               <a href="#">The 221B Community 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list7">
                  <li><a href="#">Essays</a></li>
                  <li><a href="#">Fan Fiction</a></li>
                  <li><a href="#">Art</a></li>
                  <li><a href="#">Discussion Forum</a></li>
                  <li><a href="#">Issues Archive</a></li>
               </ul> 
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">Holmes on the Web 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list8">
                  <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>
               </ul> 
            </li>
         </ul></li> 

         <li><ul>
            <li class="slideMenu">
               <a href="#">Multimedia 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list9">
                  <li><a href="#">Radio Podcasts</a></li>
                  <li><a href="#">Audiobooks</a></li>
                  <li><a href="#">Video Clips</a></li>
               </ul> 
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">Doyle's Life &amp; Times 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list10">
                  <li><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>
               </ul> 
            </li>
         </ul></li>
 
         <li><ul>
            <li class="slideMenu">
               <a href="#">Other Fictional Detectives 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list11">
                  <li><a href="#">Miss Marple</a></li>
                  <li><a href="#">Hercule Poirot</a></li>
                  <li><a href="#">Ellery Queen</a></li>
              </ul> 
           </li>
        </ul></li>

        <li class="newGroup"><a href="#">About Me</a></li>

     </ul>
     </div>
   
     <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 The 
            Strand magazine. 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 on the left.</p>
      </div>

   </form>
   </div>

</body>
</html>

Javascript:
Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   Author: 
   Date:  

   Filename:  slides.js

   -------------------------------------------------------------
   Function List:
   makeMenus()
      Initializes the contents of the mystery.htm Web page, locating
      the sliding menus, setting their initial positions and 
      display styles and defining the onevent handlers.

   showSlide()
      Shows a sliding menu while hiding any inactive menus

   closeSlide()
      Closes an inactive sliding menu

   moveSlide()
      Moves a sliding menu horizontally across the page


   -------------------------------------------------------------
   Global Variable List:

   currentSlide
      An object variable pointing to the currently active sliding menu
   
   timeID
      A variable containing the id of a timed command using the setInterval method

   leftPos
      The current left position of the sliding menu as it is 
      moved across the page

   -------------------------------------------------------------
*/

window.onload = makeMenus;
var currentSlide = null;
var timeID = null;
var leftPos = 0;


function makeMenus() {
	var slideMenus = new Array();
	var allElems  = document.getElementsByTagName("*");

	for (var i = 0; i < allElems.length; i++) {
		if (allElems[i].className == "slideMenu") slideMenus.push(allElems[i]);
}

	for (var i = 0; i < slideMenus.length; i++)  {
		slideMenus[i].onclick = showSlide;
		slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";

}

document.getElementsById("head").onclick = closeSlide;
document.getElementsById("main").onclick = closeSlide;
}


function showSlide() {
	slideList = this.getElementsByTagName("ul")[0];
	if (currentSlide && currentSlide.id == slideList.id) {
	closeSlide();
	} else {
		closeSlide();
		currentSlide = slideList;
		currentSlide.style.display = "block";
		timeID = setInterval("moveSlide()", 1);
	}
}

function closeSlide() {
	if (currentSlide) {
		clearInterval(timeID);
		currentSlide.style.left = "0px";
		currentSlide.style.display = "none";
		currentSlide = null;
	}
}

function moveSlide() {
	leftPos += 5;
	if (parseInt(currentSlide.style.left) <=220) {
		currentSlide.style.left = leftPos + "px";
	} else {
		clearInterval(timeID);
		leftPos = 0;
	}
}

CSS

Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   Author:  
   Date:     
   Filename: mblog.css

   This file contains styles used in the sherlock.htm file.

*/

*                   {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: 1000px}

a                   {text-decoration: none; color: black}
p                   {margin: 15px 0px}

#head               {width: 800px; height: 108px; background-color: white; 
                     border-bottom: 1px solid black; margin-bottom: 10px}
#head img           {float: left}
#head label         {float: right; margin-top: 15px; margin-right: 10px}
#head input         {float: right; margin-top: 15px; background-color: ivory}



#main                {float: left; margin-left: 20px; z-index: 1; width: 600px;
                      background-color: white}

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


#linkList            {width: 225px; background: rgb(0, 14, 238);
                      float: left} 
#linkList ul         {list-style: none; margin: 0px; padding: 0px}

#linkList a          {font: bold 11px/16px arial, helvetica, sans-serif;
                      display: block; border-width: 1px; border-style: solid;
                      border-color: #ccc #888 #555 #bbb; margin: 0px;
                      padding: 2px 3px}
#linkList a          {color: black; background-color: rgb(172, 172, 172);
                      text-decoration: none}
#linkList a:hover    {color: white; background: rgb(0, 0, 255)}

#linkList li         {position: relative} 

#linkList ul ul ul   {position: absolute; display: none;
                      top: 0px; left: 100%; width: 100%}

#linkList .arrow     {position: absolute; left: 210px; border-width: 0px}

#linkList .newGroup  {border-top: 1px solid red; z-index: 2}

#linkList .slideMenu > a {z-index: 2; position: relative}

Dynamic Dropdown Menus

Similar Tutorials

Hi there, im new to the forum and currently in the process of building a website.
Unfortunetly it needs a little javascript putting in and I dont know any javascript atall.

So heres my problem:
--------------------

I want 3 drop down menus where
you change the top option, the middle menu updates (from a sql database),
you change the middle option then the bottom option updates (again from the database).
you select the 3rd option.
it searches a database for the item matching all 3 entrys
it displays the price

all without reloading the page

then you add the item to cart.

------------
Heres my site with fake data in the dropdowns:
http://xeon.donov.co.uk/~blinky/?a=cat_sub&cid=3&f=A3

Drop Down Menus And Images

Similar Tutorials

I'm currently looking to revamp the Link Exchange section on my website.

Rather than clutter it with banners, I am going to put all the links into a drop down menu, with the banner for the selected site under it.

The intention is that when you select a site from the list, the banner underneath changes. However, I can only get it to do this once, then it simply refuses to let you select anything else.

This is the code I am using to change it:

Code:

function defineimage()
{
	if (document.forms[0].gourl.value = "http://jeff.zhomg.com")
	{
		document.images.linkimage.src = '/images/exchange/jeff.gif'
	}
	else if (document.forms[0].gourl.value = "http://www.strangedrawingsartgallery.com")
	{
		document.images.linkimage.src = '/images/exchange/SCH.jpg'
	} 
}

And this is my drop down menu, and the image I'd like to change:

Code:

<p><select name="gourl" onChange="defineimage()">
  <option value="http://www.strangedrawingsartgallery.com" selected>Strange City Heroes</option>
  <option value="http://jeff.zhomg.com">Invincible Jeff</option>
  </select>&nbsp;<input type="submit" name="Submit" value="Go to Site" onClick="dropdown()"></p><p><img src="/images/exchange/SCH.jpg" alt="SCH" name="linkimage" width="468" height="60" border="0" id="linkimage"></p>

If you are unsure what I mean by this, you can see for yourself by going to the page in question and selecting 'Invincible Jeff' from the list. The banner will change, but you won't be able to change the selection again.

Many thanks (again) for the help.

Interconnected Dropdown Menus From Xml

Similar Tutorials

hi,

I am making a driving map which shows lines on the map based on point of departure and destination. It's working fine he http://www.xelawho.com/map/drive2.htm

but what I would like to do is instead of having all the sidebar checkbox business, just to have two dropdown boxes - one for "from" and one for "to".

I have seen plenty of these around but my problem is that my data comes from an xml file, so I guess the menus would have to be populated by loops. The other problem being that not every departure point goes to every destination, so the second menu would have to be populated dynamically depending on the option chosen in the first...

does anybody have any ideas how I would do this?

thanks in advance.

Right Click / Context Menus / Firefox 3.6

Similar Tutorials

Hi guys,

I created a firefox extension a while ago & have just realised that the right click menu's don't seem to appear anymore...

Have the methods I'm using been deprecated? Could someone point me in the right direction?

Here's my old code....

Code:

// This is our javascript, which will check the selected link or hyperlink

function myfunction() {

    if (gContextMenu.isTextSelected)

    {
      var focusedWindow = document.commandDispatcher.focusedWindow;
      if (focusedWindow == window) focusedWindow = getBrowser().contentWindow;
var url = focusedWindow.getSelection().toString();
var mySplitResult = url.split("\n");

for(i = 0; i < mySplitResult.length; i++){
window.open('http://mysite.com/mypage.php?url=' + mySplitResult[i], 'window name')
}

    }

else {

try {url = gContextMenu.linkURL} // new FF, other?
catch(e) {
   try {url = gContextMenu.linkURL()} // old FF, SM, other?
   catch(e) {url = String(gContextMenu.link)} // either FF, other?

}
window.open('http://mysite.com/mypage.php?url=' + url, 'windowname2')
}
}

Many thanks in return!

Help! Creating Multiple Date Menus

Similar Tutorials