Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

JavaScript Forum


You are currently viewing our JavaScript Forum as a guest. Please register to participate.
Login



Reply
Javascript/CSS Menu (wasn't sure which forum this goes in)
Old 05-11-2005, 05:14 PM Javascript/CSS Menu (wasn't sure which forum this goes in)
brokensoul2271's Avatar
- - - - - - - - -

Posts: 750
Location: Lancashire, UK
Trades: 0
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>
__________________
Yes, indeed...

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

Last edited by brokensoul2271; 05-11-2005 at 05:18 PM..
brokensoul2271 is offline
Reply With Quote
View Public Profile Visit brokensoul2271's homepage!
 
 
Register now for full access!
Old 05-12-2005, 05:58 AM
ibbo's Avatar
Super Spam Talker

Posts: 880
Location: Leeds UK
Trades: 0
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
__________________

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Linux user #349545 :
(GNU/Linux)iD8DBQBAzWjX+MZAIjBWXGURAmflAKCntuBbuKCWenpm XoA7LNydllVQOwCf
ibbo is offline
Reply With Quote
View Public Profile Visit ibbo's homepage!
 
Old 05-12-2005, 06:12 AM
brokensoul2271's Avatar
- - - - - - - - -

Posts: 750
Location: Lancashire, UK
Trades: 0
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!
__________________
Yes, indeed...

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
brokensoul2271 is offline
Reply With Quote
View Public Profile Visit brokensoul2271's homepage!
 
Old 05-13-2005, 07:55 AM
ibbo's Avatar
Super Spam Talker

Posts: 880
Location: Leeds UK
Trades: 0
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
__________________

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Linux user #349545 :
(GNU/Linux)iD8DBQBAzWjX+MZAIjBWXGURAmflAKCntuBbuKCWenpm XoA7LNydllVQOwCf
ibbo is offline
Reply With Quote
View Public Profile Visit ibbo's homepage!
 
Old 05-13-2005, 09:40 AM
brokensoul2271's Avatar
- - - - - - - - -

Posts: 750
Location: Lancashire, UK
Trades: 0
There was a typo in my code thats why is wasnt working... bu your menu seems a bit more sensible to use...
__________________
Yes, indeed...

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
brokensoul2271 is offline
Reply With Quote
View Public Profile Visit brokensoul2271's homepage!
 
Reply     « Reply to Javascript/CSS Menu (wasn't sure which forum this goes in)
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.28106 seconds with 11 queries