Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation menu assistance

    I have been working on creating a drop down menu. I am very close to completion but am having trouble with 2 areas. My first issue is that I can't get the menus to display horizontal. When I try, they end up overlapping each other. The second issue is that I am trying to get the sub menus to display when I mouse over the main heading instead of being always visible. I seem to have the opposite happening as when I mouse over the main heading, the sub menu disappears. Any help would be greatly appreciated! Code is below:

    Code:
    <script type="text/javascript">
    //<![CDATA[
          function menuItem(text, link)
          {
            this.text = text;
            this.link = link;
          }
    
          function menuTrigger(name, text)
          {
            this.name = name;
            this.text = text;
          }
    
          function menu()
          {
           var itemArray = new Array();
           var args = menu.arguments;
           this.name = args[0];
           this.trigger = args[1];
            for(i=2; i<args.length; i++)
            {
             itemArray[i-2] = args[i];
            }
           this.menuItems = itemArray;
           this.write = writeMenu;
           this.position = positionMenu;
          }
    
          function positionMenu(top,left,width)
          {
          this.top = top;
          this.left = left;
          this.width = width;
          }
    
          function writeMenu()
          {
          var menuText = '<div id="';
          menuText += this.trigger.name;
          menuText += '" style="top: ';
          menuText += this.top;
          menuText += '; left: ';
          menuText += this.left;
          menuText += ';"';
          menuText += 'onMouseOver="showMenu(\'';
          menuText += this.name;
          menuText += '\')" onMouseOut="hideMenu(menuSelected)">';
          menuText += '<table border="0" width="' +
             this.width + '">';
          menuText += '<tr><th>' + this.trigger.text +
             '<\/th><\/tr><\/table><\/div>';
          menuText += '<div id="';
          menuText += this.name;
          menuText += '" style="top: ';
          menuText += (this.top+23);
          menuText += ';left: ';
          menuText += this.left;
          menuText += ';" ';
          menuText += 'onMouseOver="showMenu(menuSelected)" ';
          menuText += 'onMouseOut="hideMenu(menuSelected)">';
          menuText += '<table border="0" width="' +
            this.width + '">';
          for(i=0; i<this.menuItems.length; i++)
          {
             menuText += '<tr>';
             menuText += '<td onMouseOver="this.style.backgroundColor = \'yellow\'" onMouseOut="this.style.backgroundColor = \'\'">';
             menuText += '<a href="' + this.menuItems[i].link + '">';
             menuText += this.menuItems[i].text + '<\/a><\/td>';
             menuText += '<\/tr>';
          }
          menuText += '<\/table><\/div>';
          document.write(menuText);
          document.close();
       }
    
       var menuSelected = '';
       function showMenu(menu)
       {
          hideMenu(menuSelected);
          document.getElementById(menu).style.visibility = 'visible';
          menuSelected = menu;
       }
    
       function hideMenu(menu)
       {
          if(menuSelected!='')
             document.getElementById(menu).style.visibility = 'hidden';
       }
    //]]>
    </script>
    <style type="text/css">
    /*<![CDATA[*/
     body {
      background-color: white;
     }
    /*]]>*/
    </style>
    </head>
    <body>
    <h2>Sporting News</h2>
    <div id="menuBar"><script type="text/javascript">
    //<![CDATA[
          if(document.all)
          {
             aWidth = document.body.clientWidth;
             document.getElementById('menuBar').style.width = aWidth;
          }
          else
          {
             aWidth = innerWidth;
             document.getElementById('menuBar').style.width = aWidth-8;
          }
    
           var menuFootball = new menu('menuFootball',
             new menuTrigger('trgFootball','Football'),
             new menuItem('Yahoo Football','http://football.yahoo.com'),
             new menuItem('ESPN Football','http://www.espn.com/nfl/'),
             new menuItem('Fox Sports Football','http://www.foxsports.com/nfl'));
          menuFootball.position(0,(aWidth/2-200),100);
          menuFootball.write();
    
          var menuBaseball = new menu('menuBaseball',
             new menuTrigger('trgBaseball','Baseball'),
             new menuItem('MLB','http://www.mlb.com'),
             new menuItem('ESPN Baseball','http://www.espn.com/mlb'),
             new menuItem('Minnesota Twins','http://www.twins.mlb.com'));
          menuBaseball.position(0,(aWidth/2-100),100);
          menuBaseball.write();
    
          var menuNascar = new menu('menuNascar',
             new menuTrigger('trgNascar','Nascar'),
             new menuItem('Nascar','http://www.nascar.com'),
             new menuItem('ESPN Nascar','http://www.espn.com/nascar'),
             new menuItem('Yahoo Nascar','http://nascar.yahoo.com'));
          menuNascar.position(0,(aWidth/2),100);
          menuNascar.write();
    
          var menuHockey = new menu('menuHockey',
             new menuTrigger('trgHockey','Hockey'),
             new menuItem('NHL','http://www.nhl.org'),
             new menuItem('ESPN Hockey','http://www.espn.com/nhl'),
             new menuItem('Yahoo Hockey','http://www.nhl.yahoo.com'));
          menuHockey.position(0,(aWidth/2+100),100);
          menuHockey.write();
    
          var menuBasketball = new menu('menuBasketball',
             new menuTrigger('trgBasketball','Basketball'),
             new menuItem('NBA','http://www.nba.com'),
             new menuItem('ESPN Basketball','http://www.espn.com/nba'),
             new menuItem('Yahoo Basketball','http://www.nba.yahoo.com'));
          menuBasketball.position(0,(aWidth/2+200),100);
          menuBasketball.write();
    //]]>
    </script></div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,347
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Please don't use
    //<![CDATA[
    in the <script type="text/javascript"> tags.
    Please don't use javascript for menus.
    Read this:
    Son of Suckerfish Dropdowns
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    LinkBacks (?)

    1. 02-28-2014, 10:18 AM

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •