asked on

Changing JavaScript for customized dropdown menus and rollovers

I've been trying to figure out how to get both an image rollover as well as dropdown menus, and I finally got it working. But the rollover part only works in Firefox. It doesn't work in IE. And the only way that I know of to get this to work in IE is with the following JavaScript code supplied with "Sons of Suckerfish" dropdown menus from www.htmldog.com:

sfHover = function() {
      var sfEls = document.getElementById("nav").getElementsByTagName("LI");
      for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                  this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
      }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

I'm at a complete loss when it comes to Javascript. I was able to figure the rest out okay, but I wouldn't even know where to begin in JS. I need someone to take a look at the linked HTML and the CSS below, and figure out how to change the above JavaScript to work with the HTML and CSS.

<a href="http://members.cox.net/williamsray/toms/TOMS2.html">http://members.cox.net/williamsray/toms/TOMS2.html</a>
<a href="http://members.cox.net/williamsray/toms/toms2.css">http://members.cox.net/williamsray/toms/toms2.css</a>

If anyone would be kind enough to help, I'd be extremely grateful.

hackman_3vilGuy

I understand what you want to do but please can you post the full page code to help work on.

MTIWR

ASKER

Okay, here's the HTML code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "toms2.css";
</style>
<title>TO Management System ™</title>
<script type="text/javascript"><![CDATA[//><!]]></script>
</head>
<body>
<div id="container">
<h1>TO Management System</h1>
<ul id="nav">
      <li class="managetos"><a class="one" href="#"><span class="link">ManageTOs</span></a>
            <ul>
                  <li><a href="#">Item One</a></li>
                  <li><a href="#">Item Two</a></li>
                  <li><a href="#">Item Three</a></li>
                  <li><a href="#">Item Four</a></li>
            </ul>
      </li>
      <li class="assignment"><a class="two" href="#"><span class="link">Assignment</span></a>
            <ul>
                  <li><a href="#">Item One</a></li>
                  <li><a href="#">Item Two</a></li>
                  <li><a href="#">Item Three</a></li>
                  <li><a href="#">Item Four</a></li>
            </ul>
      </li>
      <li class="reports"><a class="three" href="#"><span class="link">Reports</span></a>
            <ul>
                  <li><a href="#">Item One</a></li>
                  <li><a href="#">Item Two</a></li>
                  <li><a href="#">Item Three</a></li>
                  <li><a href="#">Item Four</a></li>
            </ul>
      </li>
      <li class="utilities"><a class="four" href="#"><span class="link">Utilities</span></a>
            <ul>
                  <li><a href="#">Item One</a></li>
                  <li><a href="#">Item Two</a></li>
                  <li><a href="#">Item Three</a></li>
                  <li><a href="#">Item Four</a></li>
            </ul>
      </li>
      <li class="admin"><a class="five" href="#"><span class="link">Admin</span></a>
            <ul>
                  <li><a href="#">Item One</a></li>
                  <li><a href="#">Item Two</a></li>
                  <li><a href="#">Item Three</a></li>
                  <li><a href="#">Item Four</a></li>
            </ul>
      </li>
</ul>
</div>
</body>
</html>

And here's the CSS:

body {
      margin: 0;
      border: 0;
      background-color: #BFBFBF;
      text-align: center;

}
#container {
      text-align: left;
      width: 767px;
}
#nav, #nav ul { /* all lists */
      padding: 0;
      margin: 0;
      list-style: none;
      line-height: 1em;
      font: Arial, Helvetica, sans-serif;
      font-size: 12px;
}
#nav a {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 0.25em 0.25em;
}
#nav a.one {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 21px 0.25em;
}
#nav a.one:hover {
      background: url(managetos.gif) 0px -43px no-repeat;
}
#nav a.two {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 21px 0.25em;
}
#nav a.two:hover {
      background: url(assignment.gif) 0px -43px no-repeat;
}
#nav a.three {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 21px 0.25em;
}
#nav a.three:hover {
      background: url(reports.gif) 0px -43px no-repeat;
}
#nav a.four {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 21px 0.25em;
}
#nav a.four:hover {
      background: url(utilities.gif) 0px -43px no-repeat;
}
#nav a.five {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 21px 0.25em;
}
#nav a.five:hover {
      background: url(admin.gif) 0px -43px no-repeat;
}
#nav li:hover, #nav li.sfhover {
      background: #51E60F;
}
#nav li.managetos {
      float: left;
      width: 81px;
      height: 43px;
      color: #003663;
      background-image: url(managetos.gif);
      left: 0;
      top: 0;
}
#nav li.managetos:hover {
      background: url(managetos.gif) 0px -43px no-repeat;
      width: 81px;
      height: 43px;
}
#nav li.assignment {
      float: left;
      width: 82px;
      height: 43px;
      color: #003663;
      background-image: url(assignment.gif);
      left: 0;
      top: 0;
}
#nav li.assignment:hover {
      background: url(assignment.gif) 0px -43px no-repeat;
      width: 82px;
      height: 43px;
}
#nav li.reports {
      float: left;
      width: 64px;
      height: 43px;
      color: #003663;
      background-image: url(reports.gif);
      left: 0;
      top: 0;
}
#nav li.reports:hover {
      background: url(reports.gif) 0px -43px no-repeat;
      width: 64px;
      height: 43px;
}
#nav li.utilities {
      float: left;
      width: 63px;
      height: 43px;
      color: #003663;
      background-image: url(utilities.gif);
      left: 0;
      top: 0;
}
#nav li.utilities:hover {
      background: url(utilities.gif) 0px -43px no-repeat;
      width: 63px;
      height: 43px;
}
#nav li.admin {
      float: left;
      width: 52px;
      height: 43px;
      color: #003663;
      background-image: url(admin.gif);
      left: 0;
      top: 0;
}
#nav li.admin:hover {
      background: url(admin.gif) 0px -43px no-repeat;
      width: 52px;
      height: 43px;
}
#nav li ul { /* second-level lists */
      position: absolute;
      left: -999em;
      height: auto;
      width: 81px;
      w\idth: 86pxem;
      font-weight: normal;
      border-width: 0;
      margin: 0;
      background-color: #505E83;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
      left: auto;
}
.link {
display: none;
}

I hope that helps. And may I ask one more favor? How can I make the spacing between the submenu items smaller? Right now there's a large gap between each.

ASKER CERTIFIED SOLUTION

hackman_3vilGuy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MTIWR

ASKER

I'll go ahead and give you the points for this anyway since it's been a long time and no one else even responded.