www.webdeveloper.com
Results 1 to 4 of 4

Thread: Multiple Javascript menus in a html page - only 1 menu works?!

  1. #1
    Join Date
    Jul 2009
    Posts
    4

    Question Multiple Javascript menus in a html page - only 1 menu works?!

    I'm hoping someone will say - "thats an easy one!" - I think the solution is quite simple - its just I cant see it!

    Basically, I want to have 3 javascript menus in a page - but I can only get it to work with one instance of the menu - see this link for the working copy with 1 menu:

    http://jemmakidd.com/store_menus/css...u_working.html

    Here is the link to the non-working version with 3 menus:

    http://jemmakidd.com/store_menus/css...T_working.html

    Notice in the non-working instance that the menus don't have 2nd level drop down menus that appear dynamically on mouseover - and they should like the working version.

    I have been using javascriptkit.com's code which you will find here:

    http://www.javascriptkit.com/script/...icalmenu.shtml

    The javascript indicates I CAN have multiple menus in a page as you will see from the code here on the first line:

    [CODE}

    var menuids=new Array("verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas
    var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

    function createcssmenu(){
    for (var i=0; i<menuids.length; i++){
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
    spanref.className="arrowdiv"
    spanref.innerHTML="&nbsp;&nbsp;"
    ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
    }
    }


    if (window.addEventListener)
    window.addEventListener("load", createcssmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createcssmenu)

    [/CODE]

    And here is my html code with the three declared menus in it:

    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=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
    
    <script type="text/javascript" src="cssverticalmenu_NOT_working.js">
    
    /***********************************************
    
    * CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
    * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
    * This notice must stay intact for usage
    * Visit JavaScript Kit at # for this script and 100s more
    
    ***********************************************/
    
    </script>
    
    </head>
    
    <body bgcolor="#000000">
    
    
    <table width="1109" height="109" border="1">
      <tr>
        <th width="308" scope="row"><div align="left">
          <ul id="verticalmenu_jk" class="glossymenu">
            <li><a href="#">FACE</a>
                <ul>
                     <li><a href="#">PRIMER</a></li>
                  <li><a href="#">FOUNDATION</a></li>
                  <li><a href="#">POWDER</a></li>
                  <li><a href="#">CONCEALER</a></li>
                  <li><a href="#">BLUSH</a></li>
                  <li><a href="#">LUMINISORS</a></li>
                </ul>
            </li>
            <li><a href="#">EYES</a>
                <ul>
                  <li><a href="#">PRIMER</a></li>
                  <li><a href="#">SHADOW</a></li>
                  <li><a href="#">MASCARA</a></li>
                  <li><a href="#">BROW</a></li>
                  <li><a href="#">LASH</a></li>
                  <li><a href="#">LINER</a></li>
                  <li><a href="#">GLOSS</a></li>
                </ul>
            </li>
            <li><a href="#">LIPS</a>
                <ul>
                  <li><a href="#">PRIMER</a></li>
                  <li><a href="#">LIP CARE</a></li>
                  <li><a href="#">LIPSTICK</a></li>
                  <li><a href="#">LIP GLOSS</a></li>
                  <li><a href="#">LIP PENCIL</a></li>
                </ul>
            </li>
            <li><a href="#">TOOLS</a>
                <ul>
                  <li><a href="#">EYE</a></li>
                  <li><a href="#">FACE</a></li>
                  <li><a href="#">LIP</a></li>
                  <li><a href="#">BAGS/CASES</a></li>
                  <li><a href="#">LIP PENCIL</a></li>
                </ul>
            </li>
            <li><a href="#">COLLECTIONS</a></li>
            <li><a href="#">MULTI-PURPOSE</a></li>
          </ul>
        </div></th>
        <td width="272"><ul id="verticalmenu_jkms" class="glossymenu">
    <li><a href="#">FACE</a>
    <ul>
       <li><a href="#">PRIMER</a></li>
       <li><a href="#">FOUNDATION</a></li>
       <li><a href="#">POWDER</a></li>
       <li><a href="#">CONCEALER</a></li>
       <li><a href="#">BLUSH</a></li>
       <li><a href="#">LUMINISORS</a></li>
       </ul>                            
    </li>
    <li><a href="#">EYES</a>
    <ul>
    <li><a href="#">PRIMER</a></li>
    <li><a href="#">SHADOW</a></li>
    <li><a href="#">MASCARA</a></li>
    <li><a href="#">BROW</a></li>
    <li><a href="#">LASH</a></li>				
    <li><a href="#">LINER</a></li>
    <li><a href="#">GLOSS</a></li>
    </ul>                                                        
    </li>
    <li><a href="#">LIPS</a>
    <ul>
    <li><a href="#">PRIMER</a></li>
    <li><a href="#">LIP CARE</a></li>
    <li><a href="#">LIPSTICK</a></li>
    <li><a href="#">LIP GLOSS</a></li>
    <li><a href="#">LIP PENCIL</a></li>
    </ul>
    </li>
    <li><a href="#">TOOLS</a>
        <ul>
    <li><a href="#">EYE</a></li>
    <li><a href="#">FACE</a></li>
    <li><a href="#">LIP</a></li>
    <li><a href="#">BAGS/CASES</a></li>
    <li><a href="#">LIP PENCIL</a></li>
       </ul>
    </li>
    <li><a href="#">COLLECTIONS</a></li>
    <li><a href="#">MULTI-PURPOSE</a></li>
    </ul></td>
        <td width="1280"><ul id="verticalmenu_jkmspro" class="glossymenu">
    <li><a href="#">FACE</a>
    <ul>
       <li><a href="#">PRIMER</a></li>
       <li><a href="#">FOUNDATION</a></li>
       <li><a href="#">POWDER</a></li>
       <li><a href="#">CONCEALER</a></li>
       <li><a href="#">BLUSH</a></li>
       <li><a href="#">LUMINISORS</a></li>
       </ul>                            
    </li>
    <li><a href="#">EYES</a>
    <ul>
    <li><a href="#">PRIMER</a></li>
    <li><a href="#">SHADOW</a></li>
    <li><a href="#">MASCARA</a></li>
    <li><a href="#">BROW</a></li>
    <li><a href="#">LASH</a></li>				
    <li><a href="#">LINER</a></li>
    <li><a href="#">GLOSS</a></li>
    </ul>                                                        
    </li>
    <li><a href="#">LIPS</a>
    <ul>
    <li><a href="#">PRIMER</a></li>
    <li><a href="#">LIP CARE</a></li>
    <li><a href="#">LIPSTICK</a></li>
    <li><a href="#">LIP GLOSS</a></li>
    <li><a href="#">LIP PENCIL</a></li>
    </ul>
    </li>
    <li><a href="#">TOOLS</a>
        <ul>
    <li><a href="#">EYE</a></li>
    <li><a href="#">FACE</a></li>
    <li><a href="#">LIP</a></li>
    <li><a href="#">BAGS/CASES</a></li>
    <li><a href="#">LIP PENCIL</a></li>
       </ul>
    </li>
    <li><a href="#">COLLECTIONS</a></li>
    <li><a href="#">MULTI-PURPOSE</a></li>
    </ul></td>
      </tr>
    </table>
    </body>
    </html>
    So of course my question is - what have I missed and how do I get it to work!?

    Many thanks in advance...

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You're using the ID more than once:
    Code:
    <ul id="verticalmenu_jkms" class="glossymenu">
    You need to change the ID of each one to something unique, then enter those ID's in this variable:
    Code:
    var menuids=new Array("verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas

  3. #3
    Join Date
    Jul 2009
    Posts
    4

    Question

    I'm only referring in the code once to each id - for example:

    id="verticalmenu_jkms" is only referenced once in the HTML!? I can reference class="glossymenu" more than once I believe....

    var menuids=new Array("verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas

    So I'm not sure where to go with this but need to get it fixed!

    Thanks for your help so far...

  4. #4
    Join Date
    Jul 2009
    Posts
    4

    Thumbs up Resolved!

    Sorted that out - changed the following line:

    var menuids=["verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro"] //Enter id(s) of UL menus, separated by commas

    and made sure the brackets were square, not rounded which they were on the original script from these guys...

    http://www.javascriptkit.com/script/...icalmenu.shtml

    Thanks for all your help...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles