Dropdown menu issue in Fireworks and Dreamweaver MX 2004

They have: 16 posts

Joined: May 2006

Hello,

I have an issue with the dropdown I created using fireworks mx 2004 and dreamweaver mx 2004.

The easiest way for me to explain it is to include the screenshots below:

Here is the dropdown with my cursor over "Company Information"

My problem lies with the "Directions Link". When I put my cursor over that I want two submenus to pop up under it. But that does not happen. When I put my cursor over it this is what happens:

Notice the two submenus do not pop up below "Directions" but replaces the "Company Leadership" and "Certifications links.

How do I get the "Headquarters" and "Millersville Training Facility" to pop up under "Directions"

Here is my configuration in the Content section of the pop-up editor.

And here is the code in the html file that was generated by Fireworks:

<script language="JavaScript">
0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
</script>
<script language="JavaScript1.2" src="mm_menu.js"></script>

<script language="JavaScript1.2">mmLoadMenus();</script>



















I would greatly appreciate your help in this manner.

Thanks,
Walter

They have: 34 posts

Joined: May 2006

I use layers for this. Try some like that (in closer layer - x.gif - transparance gif image 1x1):
=========================================

<html>
<head>
&lt;script language="JavaScript"&gt;
<!--
function mouseOverPopup (obj) {
obj.style.backgroundColor='#74B3D3';
obj.className='p_menu_on';
}

function mouseOutPopup (obj) {
obj.style.backgroundColor='#fafafa'
obj.className='p_menu';
}


function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function P7_autoLayers() { //v1.2 by PVII
var g,b,k,f,args=P7_autoLayers.arguments;
var a = parseInt(args[0]);if(isNaN(a))a=0;
if(!document.p7setc) {p7c=new Array();document.p7setc=true;
  for (var u=0;u<10;u++) {p7c[u] = new Array();}}
for(k=0; k<p7c[a].length; k++) {
  if((g=MM_findObj(p7c[a][k]))!=null) {
   b=(document.layers)?g:g.style;b.visibility="hidden";}}
for(k=1; k<args.length; k++) {
  if((g=MM_findObj(args[k])) != null) {
   b=(document.layers)?g:g.style;b.visibility="visible";f=false;
   for(j=0;j<p7c[a].length;j++) {
    if(args[k]==p7c[a][j]) {f=true;}}
  if(!f) {p7c[a][p7c[a].length++]=args[k];}}}
}
//-->
&lt;/script&gt;
<title>EXAMPLE MENU</title>
</head>
<body>
<table width=780 border=0 cellpadding=0 cellspacing=0>
<tr>
<td background="/images/mm_04.gif" width=521 height=16>
        <a href="1.html" onMouseOver="P7_autoLayers(0,'Closer')">First</a>&nbsp;|&nbsp;
        <a href="2.html" onMouseOver="P7_autoLayers(0,'l2','Closer')">Second</a>&nbsp;|&nbsp;
        <a href="3.html" onMouseOver="P7_autoLayers(0,'l3','Closer')">La la la</a>&nbsp;|&nbsp;
</td>
</tr>
</table>
<!-- divs start -->
      <div id="l2" style="position:absolute; width:99px; height:45px; z-index:8; left: 42px; top: 34px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l2','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="21.html">21</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l2','l2_2','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="22.html">22</a> >>></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l2','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="23.html">23</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="l3" style="position:absolute; width:99px; height:45px; z-index:8; left: 103px; top: 34px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="31.html">31</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="32.html">32</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','l3_3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="33.html">33</a> >>></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="P7_autoLayers(0,'l3','Closer'); mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="34.html">34</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="l2_2" style="position:absolute; width:99px; height:45px; z-index:8; left: 168px; top: 62px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="221.html">221</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="222.html">222</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="223.html">223</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="224.html">224</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="l3_3" style="position:absolute; width:99px; height:45px; z-index:8; left: 229px; top: 89px; visibility: hidden">
        <table width=127 border=0 cellspacing=0 cellpadding=1>
          <tr><td bgcolor=#000000>
              <table width=125 border=0 cellspacing=0 cellpadding=4>
              <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="331.html">331</a></td></tr>
                <tr><td bgcolor=#fafafa onMouseOver="mouseOverPopup(this);" onMouseOut="mouseOutPopup(this);"><a href="332.html">332</a></td></tr>
              </table>
          </td></tr>
        </table>
      </div>
      <div id="Closer" style="position:absolute; width:585px; height:359px; z-index:1; left: 1px; top: 34px; visibility: hidden"><a href="#" onMouseOver="P7_autoLayers(0)"><img src="x.gif" width="100%" height="100%" border="0"></a></div>
<!-- divs end -->
</body>
</html>

They have: 16 posts

Joined: May 2006

I tried it out and it works alot easier than the dropdown code I used initially.

Now can I build this like I have it in my screenshots above?

Thanks for the code. May I use it on my site and if so would you like for me to attribute the code to you in the comments? Let me know and I will be glad to.

wstinnett

They have: 1 posts

Joined: May 2006

Just to introduce myself first, I'm Darren - hello all

I am pretty much a novice web designer as I have learned all I know myself. I have a website for the company I work for caoh.org.uk and I am wanting to create an on-line directory. For this I have started to create a drop down menu. I have tried to put a hyperlink in this menu in order to pick the page you land on. This might not make much sense but I have pasted below what I have done so far. This might be the wrong way to do this but I would appreciate any help or advice on how I should be doing this. I haven't used this forum before either so if I am doing something wrong please let me know.

Many thanks all.

Home

<script>
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
</script>

<script type="text/javascript" src="styleswitcher.js"></script>

LargePrint
NormalPrint
Collective Signpost Directory

Please find below our online Signpost directory. The information available below has been taken from all of the signpost directories created by Community Action on Health with the help from HealthWORKS and Newcastle City Council. You can search for and organisation, service or community group by the signpost Area, Name of the organisation or by the Category under which they are listed.

Area

East
Fawdon
Gosforth
Outer West
West

Name

Community Action on Health
East End Asylum Seekers
Lifeline
PALS
PROPS

Category

Drugs
Asylum Seekers
Health Services
Community Projects
GP Surgeries


If you have any queries about the above information or know of any amendments to the information we have then please contact me [email protected]

They have: 16 posts

Joined: May 2006

Darren,

Welcome to the forum. I am new as well. I went on the website http://www.echoecho.com/ and found a snippet of code that accomplishes what you are wanting.

First of all, right before the closing head and script tag put this piece of JavaScript:

function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.select.options[menu.select.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->

2nd of all, put this onChange event handler in the select tag of each of your drop downs:

onChange="jump(this.form)

And finally, in the option tag put this:

value="what ever your URL is for that particular selection"

Make sure that the name attribute in the select tag stays the same for each of your drop downs and make sure it matches this line in the JS code in the head section:

ref=menu.select.options[menu.select.selectedIndex].value;

Let me know if this helps you out.

Thanks,
wstinnett

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.