Javascript/CSS Menu (wasn't sure which forum this goes in)

**brokensoul2271** · 06:18 PM

Im currently trying to learn javascript and have run into a problem when trying to create a dynamic menu. I have been doing examples from a book but I can't seem to find what the problem is in its pages so any help would be appreciated.

Ive set up an example page at www.strangedarkness.com/menuEx.html

When you hover over 'Navigation' A menu should appear and then dissapear when you remove the cursor but it gets stuck instead of disappearing...

Here's the Javascript/Html.

Code:

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Menu Example</title>
  <style type="text/css">
  span {
  font-family: verdana, arial;
  text-decoration: none;
  font-size: 16px;
  }
  a:link.menuItem {
  font-family: verdana, arial;
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  border: 1px solid #000000;
  }
  a:hover.menuItem {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #cccccc;
  }
  span.menubar {
  position: absolute;
  top: 10px;
  background: #666666;
  }
  span.options {
  position: relative;
  top: 28px;
  visibility: hidden;
  }
  </style>
  <script type="text/javascript">
  menuVis = false;
  
  function menuShow(e)
  {
    if (menuVis != true)
    {
      if (window.event)
      {
        var elem = event.srcElement;
      }
      else if (e)
      {
        var elem = e.target;
      }
      if (elem.nodeType == 3)
    {
      elem = elem.parentNode;
    }
      var sub_menu = "title" + elem.id.substr(5,5);
      var elemnew = document.getElementById(sub_menu);
      elemnew.style.visibility = "visible";
      menuVis=true;
    }
  }
  
  function hideOnMouseLeave (element, evt)
  {
    if (element.id.substr(0,5)=='popup')
    {
      element = element.nextSibling;
      if (element.nodeType == "3")
      {
        element = element.nextSibling;
      }
    }
    if (element.contains && evt.toElement)
    {
      if (!element.contains(evt.toElement))
      {
      element.style.visibility = 'hidden';
      menuVis=false;
      }
    }
    else if (evt.relatedTarget)
    {
      if (!contains(element, evt.relatedTarget))
      {
        element.style.visibilty = 'hidden';
        menuVis=false;
      }
    }
  }
  
  function contains (container, containee)
  {
    do
    {
      if (container == containee)
      {
        return true;
      }
      containee = containee.parentNode;
    }
    while (containee);
    return false;
  }
  </script>
  </head>
  <body>
  <span class="menubar" id="popup1" onmouseover="return menuShow(event)"
      onmouseout="hideOnMouseLeave(this.event)">
  Navigation
  </span>
  <span class="options" onmouseout="hideOnMouseLeave(this.event);"
      style="position: absolute; background: #aaaaaa;" id="title1">
     <a class="menuItem" href="link1.html">Link 1</a><br />
     <a class="menuItem" href="link2.html">Link 2</a><br />  
     <a class="menuItem" href="link3.html">Link 3</a><br />  
     <a class="menuItem" href="link4.html">Link 4</a><br />  
     <a class="menuItem" href="link5.html">Link 5</a>
     </span>
  </body>
</html>

**ibbo** · 05-12-2005, 06:58 AM

Code:

<script>

function toggleMenu(objectID, openid, closeid) {

   var object = document.getElementById(objectID);
   var open    = document.getElementById(openid);
   var close   = document.getElementById(closeid);

   if (object.style.display =='block') {
        object.style.display='none';
        open.style.display='block';
        close.style.display='none';
   }
   else{
      object.style.display='block';
      open.style.display='none';
      close.style.display='block';
   }

}
</script>
<a onmouseover="javascript:toggleMenu('1','navi','nav')"
   style="float:left;cursor:pointer;cursor:hand;"
>
<span id="navi" style="display:block;">Navigation (+)</span>
<span id="nav" style="display:none;">Navigation (-)</span>
</a>
<br />

      <span style="float:left;
                   border:1px solid black;
                   width:100px;
                   display: none;
                   text-align:center;" 
                   
                   id="1">
         <a href="#">Link</a> <br />
         <a href="#">Link</a> <br />
         <a href="#">Link</a> <br />
         <a href="#">Link</a> <br />
         <a href="#">Link</a> <br />
      </span>

I find onmouseover slightly anoying as it does not give a smooth feel to things. But you can simply create this type of menu by manipulating your css via javascript "example above".

Dont worry yourself over the + and - tags get a feel of how you can use the disaplay css option and flick between block and none.

Once you get a grip of that simple example you will be moving on to bigger fish.

Ibbo

**brokensoul2271** · 05-12-2005, 07:12 AM

hey thanks! I havent been able to get any decent help anywhere. I think you just saved me from pounding my head into a wall!

**ibbo** · 05-13-2005, 08:55 AM

I found once I got my head around the DOM and the controls that css provides, that the browser was a completely different tool for me to work with.

And I know how the head pounding goes mate.

Ibbo

**brokensoul2271** · 05-13-2005, 10:40 AM

There was a typo in my code thats why is wasnt working... bu your menu seems a bit more sensible to use...