UDM4 expanding menu not working in Firefox 3

07-17-2008, 05:54 PM jlortz Posts: n/a #1

I'm new to UDM4 (and love it!), and I'm having problems getting an expanding menu that works fine in IE7 to work in Firefox 3. I'm using the JS version, and have validated my code with the W3C.

The menu appears as it should, but when I click to open a submenu, the submenu appears but the links do not function. Here is a link to the test page I have online:

http://www.shf.org/mgitest/mgi-template02.html

I've looked through other message postings, but couldn't find anyone with the same problem. I've attached my code in case someone wants to take a look.

Code:

<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#cbceea;
	background-image:url(bg04a.png);
	background-repeat:repeat-y;
}
#menubox {
	vertical-align:top;
	width: 135px;
	float: left;
	margin-right:0px;
	margin-left:0px;
	margin-top:20px;
	margin-bottom: 0px;	
	padding-left: 5px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;	
	clear:both;
}


#mainpage {
	width:571px;
	margin-left:160px;
	margin-top: 0px;
	margin-bottom:40px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height: 16px;
}
#mainheader {
	width:571px;
	margin-left:160px;
	margin-top: 0px;
	margin-bottom:0px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 24px;
}
#footerarea {
	width:571px;
	margin-left:160px;
	margin-top: 0px;
	margin-bottom:40px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height: 16px;
	text-align:center;
}
/* expanding menu styling */
#udm ul {
	margin-left:0 !important;
	margin-top:1px !important;
	}
/* expanding menu styling */
#udm ul {
	width:128px !important;
	w\idth:120px !important;
	}

#udm ul ul {
	width:120px !important;
	w\idth:112px !important;
	border-style:dashed;
	background-color:#ffe;
	}
#udm ul ul ul {
	width:112px !important;
	w\idth:104px !important;
	border-style:dotted;
	background-color:#ffd;
	}

/* give all anchors a hand cursor */
#udm a {
	cursor:pointer !important;
	cursor:hand !important;
	}
</style>

<!-- ULTIMATE DROP DOWN MENU Version 4.5 by Brothercake -->
<!-- http://www.udm4.com/ -->
<script type="text/javascript" src="udm-resources/udm-custom.js"></script>
<script type="text/javascript" src="udm-resources/udm-control.js"></script>
<script type="text/javascript" src="udm-resources/udm-style.js"></script>


</head>

<body>
<!-- script files for UDD menu system -->
<script type="text/javascript" src="udm-resources/udm-dom.js"></script>


<!-- top banner -->
<img src="banner-test02c.png" alt="MGI-banner" width="780" height="212" />

<!-- side menu bar area -->
<div id="menubox">

<ul id="udm" class="udm">
	<li class="onclick"><a href="index2.htm">Home</a>	</li>
    <li class="onclick"><a href="mgi.htm">MGI</a>
     <ul>
		 <li class="onclick"><a href="ourstory.htm">Our Story</a>
     		<ul>
		 		<li class="onclick"><a href="history.htm">History</a></li>
		 		<li class="onclick"><a href="media.htm">Media</a></li>
	  		</ul>        
         </li>
         
		 <li class="onclick"><a href="howbegin.htm">How Do I Begin</a></li>
		 <li class="onclick"><a href="employment.htm">Employment</a>
     		<ul>
		 		<li class="onclick"><a href="openings.htm">Openings</a></li>
		 		<li class="onclick"><a href="apply.htm">Apply</a></li>
	  		</ul>            
         </li>
		 <li class="onclick"><a href="contact.htm">Contact Us</a></li>
		 <li class="onclick"><a href="sponsors.htm">Sponsors and Partners</a></li>
		 <li class="onclick"><a href="resources.htm">Resources</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">Jargon</a></li>
		 		<li class="onclick"><a href="vt.htm">Board of Dirctors</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Links</a></li>
		 		<li class="onclick"><a href="staff.htm">History</a></li>
	  		</ul>         
         </li>                                   
	  </ul>
	</li>
	<li class="onclick"><a href="ourfamily.htm">Our Family</a>
     <ul>
		 <li class="onclick"><a href="fhal.htm">Florence Home Assisted Living</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">More Information</a></li>
		 		<li class="onclick"><a href="vt.htm">Virtual Tour</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Testimonials</a></li>
		 		<li class="onclick"><a href="staff.htm">Staff</a></li>
	  		</ul>
         </li>
         
		 <li class="onclick"><a href="fhhc.htm">Florence Home Health Care</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">More Information</a></li>
		 		<li class="onclick"><a href="vt.htm">Virtual Tour</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Testimonials</a></li>
		 		<li class="onclick"><a href="staff.htm">Staff</a></li>
	  		</ul>         
         </li>

		 <li class="onclick"><a href="roal.htm">Royale Oaks Assisted Living</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">More Information</a></li>
		 		<li class="onclick"><a href="vt.htm">Virtual Tour</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Testimonials</a></li>
		 		<li class="onclick"><a href="staff.htm">Staff</a></li>
	  		</ul>         
         </li>

		 <li class="onclick"><a href="hoh.htm">House of Hope Alzheimers Care</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">More Information</a></li>
		 		<li class="onclick"><a href="vt.htm">Virtual Tour</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Testimonials</a></li>
		 		<li class="onclick"><a href="staff.htm">Staff</a></li>
	  		</ul>         
         </li>

		 <li class="onclick"><a href="tdp.htm">Transitions Day Program</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">More Information</a></li>
		 		<li class="onclick"><a href="vt.htm">Virtual Tour</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Testimonials</a></li>
		 		<li class="onclick"><a href="staff.htm">Staff</a></li>
	  		</ul>         
         </li>

		 <li class="onclick"><a href="gmum.htm">Gerimed / Unimed Pharmacies</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">More Information</a></li>
		 		<li class="onclick"><a href="vt.htm">Virtual Tour</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Testimonials</a></li>
		 		<li class="onclick"><a href="staff.htm">Staff</a></li>
	  		</ul>         
         </li>                                   

		 <li class="onclick"><a href="shf.htm">Senior Health Foundation</a>
     		<ul>
		 		<li class="onclick"><a href="moreinfo.htm">More Information</a></li>
		 		<li class="onclick"><a href="vt.htm">Virtual Tour</a></li>
		 		<li class="onclick"><a href="testimonials.htm">Testimonials</a></li>
		 		<li class="onclick"><a href="staff.htm">Staff</a></li>
	  		</ul>         
         </li>     

  	  </ul>
    </li>
	<li class="onclick"><a href="sitemap.htm">Site Map</a>	</li>    
</ul>
</div>

<!-- main page header area -->
<div id="mainheader">
     Florence Home Assisted Living
</div>

<!-- Main page content area -->
<div id="mainpage"> 
  <p>This is the main page area to fill in with content</p>
  <p>&nbsp;  </p>
</div>

<!-- page footer -->
<div id="footerarea">
Copyright © 2008<br />
Mid-West Geriatrics, Inc.<br />
7915 North 30th Street<br />
Omaha, NE 68112<br />
402.827.6000<br />
</div>

</body>
</html>

Sangui · 10-22-2008, 09:35 PM

I'm having the same problem. Is there any update to UDM4 to make it so expanding menus actually work in FF3, or do I have to migrate to something else?

10-23-2008, 02:26 PM Admin Posts: n/a #3

I'm not aware of any FF3 issues, but will certainly have our developers look into it. As always, we strongly recommend you validate your HTML code. The link you provided is giving me a 404 error. Do you know if your HTML is valid?

Sangui · 09:21 PM

I'm not the original poster, but my site that's using udm4 and expanding menus that doesn't work is
It works fine in IE7, doesn't work in Firefox.

colech · 11-06-2008, 04:09 PM

I was trying to figure out this question as well.

I suspect is has to do with JS doing an onclick or onmouseup BEFORE the anchor href is followed. So, does anyone know how to follow the link as specified in the tag <a href="/about-us/index.php"> in addition to doing the expanding menu. Here are two things I've tried that have not worked so far...

Code:

<li class="onclick" onmousedown="location.href='/about-us/index.php';">
...
</li>

Code:

<li class="onclick" onclick="location.href='/about-us/index.php';">
...
</li>

colech · 05:53 PM

Wahoo... this page helped me figure out the first half of the problem. Now the items that have submenus are clickable. They don't stay expanded though, so I still need help on that but am looking for the answer now:
http://www.experts-exchange.com/Prog..._22084656.html

NOTE: I am using "udm-x-youarehere.js" instead of "udm-x-snapshot.js" because then if someone manually enters a url in the address bar, the menu will expand properly to right place instead of just saving the last click.

Here is what I gleaned from that and how I got it to work. Notice that I added the onclick to the <a> tag instead of the <li> tag. The reason for using "this.href" instead of "/about-us/index.html" was many people (like myself) have dynamically created menus. It's more difficult to write out the url both in href and onclick, so this way it just copies the value from the href tag to the onclick tag. Now my menu follows the link BUT does not expand for this page. At least we're one step closer.

Code:

<li class="onclick">
  <a href="/about-us/index.php" onclick="document.location.href=this.href; return false;">About Us</a>
</li>

colech · 11-06-2008, 07:49 PM

Whew... I found out how to get the submenu to be displayed when the parent of the submenu is selected when using the expandable menu.

NOTE: To my knowledge, this will only work if you have a dynamic way of adding adding a class to all <li> tags that are currently selected. In this case I chose to use the class "show-since-li-tag-is-active"

Use this CSS (The !important below may or may not be necessary, I was just being safe):

Code:

#udm li.show-since-li-tag-is-active ul {
  position:relative !important;
  display:block !important;
  height:auto !important;
  left:auto !important;
  overflow:visible !important;
  visibility:visible !important;
}

And here is the corresponding HTML menu when at url http://www.domain.com/about-us/

Code:

<ul>
  <li class="onclick">
    <a href="/" onclick="document.location.href=this.href; return false;">Homepage</a>
  </li>
  <li class="onclick show-since-li-tag-is-active">
    <a href="/about-us/" onclick="document.location.href=this.href; return false;">About Us</a>
    <ul>
      <li class="onclick">
        <a href="/about-us/contact-info/" onclick="document.location.href=this.href; return false;">Contact Info</a>
      </li>
    </ul>
  </li>
</ul>

Please let me know if there is a better way to find an active <li> tag potentially through the use of something in udm-x-youarehere.js. I would really like a better way to do this.

This has been verified to work in FF3 and IE7 assuming I didn't do any typos here

Home

About

Demos

Download

Purchase

Support

Contact

Forum

Blog