www.webdeveloper.com
+ Reply to Thread
Results 1 to 4 of 4
  1. 07-21-2009 11:49 AM #1
    littlealex2009
    littlealex2009 is offline Registered User
    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...
    Reply With Quote Reply With Quote
  2. 07-21-2009 12:25 PM #2
    KDLA's Avatar
    KDLA
    KDLA is offline Registered User
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,166
    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
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)
    Reply With Quote Reply With Quote
  3. 07-22-2009 02:01 AM #3
    littlealex2009
    littlealex2009 is offline Registered User
    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...
    Reply With Quote Reply With Quote
  4. 07-22-2009 02:43 AM #4
    littlealex2009
    littlealex2009 is offline Registered User
    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...
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Tags for this Thread

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles