CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 15 of 15
  1. #1
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    [ REALLY RESOLVED ] Multi Column Menu

    Hello guys, it's becoming a habit to post my problems here...

    I want to make a multi column menu, similar to screenshot1. I already have a menu, so I decided to try and change it. The menu.js file looks like this :
    Code:
    function setOpacity(id, amount){
      var obj = document.getElementById(id);
      if(document.all){obj.style.filter = "alpha(opacity:" + amount + ")";}
      else{obj.style.opacity = amount / 100;}
    }
    
    function showMenu(obj, menu){
      if(menu){
        var curleft = curtop = 0;
        if(obj.offsetParent){
          x = obj.offsetLeft;
          y = obj.offsetTop;
          w = obj.offsetWidth + 75;
          h = obj.offsetHeight;
          while(obj = obj.offsetParent){
            x += obj.offsetLeft;
            y += obj.offsetTop;
          }
        }
        document.getElementById(menu).style.left = x;
        document.getElementById(menu).style.top = y + h;
        document.getElementById('t' + menu).style.width = w;
        setOpacity(menu, 90)
        document.getElementById(menu).style.display = "block";
      }
    }
    function displayMenu(menu){
      document.getElementById(menu).style.display = "block";
    }
    function hideMenu(menu){
      document.getElementById(menu).style.display = "none";
    }
    
    
    var domain = "misc/"; // path to folder with images (end with /)
    var submenus = new Array();
    var menu = "<table cellpadding=5 cellspacing=0 border=0 height=32 bgcolor='#FFFFFF'><tr>";
    for(i=0;i<items.length;i++){
      if(items[i][2] == "new"){var link = "location.replace('" + items[i][1] + "')";}
      else{var link = "window.location='" + items[i][1] + "'";}
      if(items[i][1] != 'sub'){
        menu += "<td class='root' background='" + domain + "root.jpg' id='td" + i + "' ";
        menu += "onclick=\"" + link + "\">&nbsp;" + items[i][0] + "&nbsp;</td>";
      }
      else{
        submenus[submenus.length] = items[i][0];
        menu += "<td class='root' id='td" + i + "' ";
        menu += "onmouseover=\"showMenu(this, 'sub" + items[i][0] + "')\" ";
        menu += "onmouseout=\"hideMenu('sub" + items[i][0] + "')\" ";
        menu += "background='" + domain + "root.jpg' onclick=\"location.replace\" ";
        menu += "onclick=\"" + link + "\">&nbsp;" + items[i][0] + "&nbsp;</td>";
        var submenu = "<div id='sub" + items[i][0] + "' style='position:absolute; display:none'>";
        submenu += "<table cellpadding=3 cellspacing=0 style='border:1px solid #FFFFFF' id='tsub" + items[i][0] + "' bgcolor='#FFFFFF' ";
        submenu += "onmouseover=\"displayMenu('sub" + items[i][0] + "')\" onmouseout=\"hideMenu('sub" + items[i][0] + "')\" ";
        submenu += "background='" + domain + "sub.jpg'>";
        for(ii=0;ii<items[i][2].length;ii++){
          if(items[i][2][ii][2] == "new"){var link = "location.replace('" + items[i][2][ii][1] + "')";}
          else{var link = "window.location='" + items[i][2][ii][1] + "'";}
          submenu += "<tr height=24 border = '2'><td class='sub' onclick=\"" + link + "\" valign='middle' ";
          submenu += "onmouseover=\"this.style.background='#990000';this.style.color='#FFFFFF'\" ";
          submenu += "onmouseout=\"this.style.background='url(" + domain + "sub.jpg)';this.style.color='#FFFFFF'\">";
          if(ii >= 5) {
          submenu += "</td>"
          submenu += "<td class='sub' onclick=\"" + link + "\" valign='top' ";
          submenu += "onmouseover=\"this.style.background='#990000';this.style.color='#FFFFFF'\" ";
          submenu += "onmouseout=\"this.style.background='url(" + domain + "sub.jpg)';this.style.color='#FFFFFF'\">";
          }
          submenu += "&nbsp;&nbsp;" + items[i][2][ii][0] + "&nbsp;&nbsp;</td></tr>"
              }
        submenu += "</table></div>";
        document.write(submenu);
      }
    }
    menu += "</tr></table>";
    document.write(menu);
    The items.js file looks like this :
    Code:
    var items = [
        ["Home", "main.htm", null],
        ["Facilitator Based Courses", "sub", [
            ["Computer Literacy", "sliteracy.htm", "sub"],
            ["6 Months Computer Awareness", "sliteracy.htm", "h1"],
            ["12 Months Computer Literacy", "sliteracy.htm", "new"],
            ["Pastel & Business", "spastelbusiness.htm", "sub"],
            ["Pastel","spastelbusiness.htm", "new"],
            ["Programming", "sprogramming.htm", "sub"],
            ["VB.NET", "sprogramming.htm","new"],
            ["C#", "sprogramming.htm","new"],
            ["Web Design", "swebdesign.htm", "new"],
            ["Graphic Design", "sgraphicdesign.htm", "new"],
            ["Technician", "stechnician.htm", "new"]]
        ],
        ["Instructor Led Short Courses", "sub", [
            ["Computer Literacy", "iliteracy.htm", "new"],
            ["Pastel & Business", "ipastelbusiness.htm", "new"],
            ["Programming", "iprogramming.htm", "new"],
            ["Web Design", "iwebdesign.htm", "new"],
            ["Graphic Design", "igraphicdesign.htm", "new"],
            ["Technician", "itechnician.htm", "new"]]
        ],
    	["Contact Us", "contact_us.htm", null]
    ];
    Based on my changes, it does indeed show 2 columns, but it shows 5 items in the left column, then nothing beside it, then all of a sudden it shows the rest at the bottom, as screenshot 2 shows.
    How can I get the items to display next to each other ¿
    Last edited by HanneSThEGreaT; June 14th, 2010 at 05:44 AM.

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Multi Column Menu

    Hmmm...this code looks strangely familiar! Haha. That was a while back!

    The problem was the actual output of the table. It wasn't exactly what you wanted. Try this...

    Code:
    var domain = "misc/"; // path to folder with images (end with /)
    var submenus = new Array();
    var menu = "<table cellpadding=5 cellspacing=0 border=0 height=32 bgcolor='#FFFFFF'><tr>";
    for(i=0;i<items.length;i++){
      if(items[i][2] == "new"){var link = "location.replace('" + items[i][1] + "')";}
      else{var link = "window.location='" + items[i][1] + "'";}
      if(items[i][1] != 'sub'){
        menu += "<td class='root' background='" + domain + "root.jpg' id='td" + i + "' ";
        menu += "onclick=\"" + link + "\">&nbsp;" + items[i][0] + "&nbsp;</td>";
      }
      else{
        submenus[submenus.length] = items[i][0];
        menu += "<td class='root' id='td" + i + "' ";
        menu += "onmouseover=\"showMenu(this, 'sub" + items[i][0] + "')\" ";
        menu += "onmouseout=\"hideMenu('sub" + items[i][0] + "')\" ";
        menu += "background='" + domain + "root.jpg' onclick=\"location.replace\" ";
        menu += "onclick=\"" + link + "\">&nbsp;" + items[i][0] + "&nbsp;</td>";
        var submenu = "<div id='sub" + items[i][0] + "' style='position:absolute; display:none'>";
        submenu += "<table cellpadding=3 cellspacing=0 style='border:1px solid #FFFFFF' id='tsub" + items[i][0] + "' bgcolor='#FFFFFF' ";
        submenu += "onmouseover=\"displayMenu('sub" + items[i][0] + "')\" onmouseout=\"hideMenu('sub" + items[i][0] + "')\" ";
        submenu += "background='" + domain + "sub.jpg'>";
        submenu += "<tr height=24 border = '2'><td class='sub' onclick=\"" + link + "\" valign='middle' ";
        submenu += "onmouseover=\"this.style.background='#990000';this.style.color='#FFFFFF'\" ";
        submenu += "onmouseout=\"this.style.background='url(" + domain + "sub.jpg)';this.style.color='#FFFFFF'\">";
    
        var tmpCol = 0;
        for(ii=0;ii<items[i][2].length;ii++){
          if(items[i][2][ii][2] == "new"){var link = "location.replace('" + items[i][2][ii][1] + "')";}
          else{var link = "window.location='" + items[i][2][ii][1] + "'";}
    
          submenu += "<td class='sub' onclick=\"" + link + "\" valign='top' ";
          submenu += "onmouseover=\"this.style.background='#990000';this.style.color='#FFFFFF'\" ";
          submenu += "onmouseout=\"this.style.background='url(" + domain + "sub.jpg)';this.style.color='#FFFFFF'\">";
          submenu += "&nbsp;&nbsp;" + items[i][2][ii][0] + "&nbsp;&nbsp;</td>"
    
          tmpCol++;
          if (tmpCol == 2) {
            submenu += "</tr>";
            submenu += "<tr height=24 border = '2'><td class='sub' onclick=\"" + link + "\" valign='middle' ";
            submenu += "onmouseover=\"this.style.background='#990000';this.style.color='#FFFFFF'\" ";
            submenu += "onmouseout=\"this.style.background='url(" + domain + "sub.jpg)';this.style.color='#FFFFFF'\">";
            tmpCol = 0;
          }
        }
        submenu += "</tr>";
        submenu += "</table></div>";
        document.write(submenu);
      }
    }
    menu += "</tr></table>";
    document.write(menu);
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: Multi Column Menu

    Yeah, it was a long time ago

    Thank you very very much!, I can work with this now.

    You make it look so easy!

    I'll rate you again when I can!

  4. #4
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Question Re: [RESOLVED] Multi Column Menu

    ( I know I resolved the thread, I have another question based on this )

    OK, I have the columns now, I have modified the script to look like :
    Code:
    function setOpacity(id, amount){
      var obj = document.getElementById(id);
      if(document.all){obj.style.filter = "alpha(opacity:" + amount + ")";}
      else{obj.style.opacity = amount / 100;}
    }
    
    function showMenu(obj, menu){
      if(menu){
        var curleft = curtop = 0;
        if(obj.offsetParent){
          x = obj.offsetLeft - 80;
          y = obj.offsetTop;
          w = obj.offsetWidth + 75;
          h = obj.offsetHeight;
          while(obj = obj.offsetParent){
            x += obj.offsetLeft;
            y += obj.offsetTop;
          }
        }
        document.getElementById(menu).style.left = x;
        document.getElementById(menu).style.top = y + h;
    
        setOpacity(menu, 90)
        document.getElementById(menu).style.display = "block";
      }
    }
    function displayMenu(menu){
      document.getElementById(menu).style.display = "block";
    }
    function hideMenu(menu){
      document.getElementById(menu).style.display = "none";
    }
    
    var domain = "misc/"; // path to folder with images (end with /)
    var submenus = new Array();
    var menu = "<table cellspacing=0 border=0 width=100% bgcolor='#FFFFFF'><tr>";
    for(i=0;i<items.length;i++){
      if(items[i][2] == "new"){var link = "location.replace('" + items[i][1] + "')";}
      else{var link = "window.location='" + items[i][1] + "'";}
      if(items[i][1] != 'sub'){
        menu += "<td class='root' id='td" + i + "' ";
        menu += "onclick=\"" + link + "\">" + items[i][0] + "</td>";
      }
      else{
        submenus[submenus.length] = items[i][0];
        menu += "<td class='root' id='td" + i + "' ";
        menu += "onmouseover=\"showMenu(this, 'sub" + items[i][0] + "')\" ";
        menu += "onmouseout=\"hideMenu('sub" + items[i][0] + "')\" ";
        menu += " onclick=\"location.replace\" ";
        menu += "onclick=\"" + link + "\">" + items[i][0] + "</td>";
        
        var submenu = "<div id='sub" + items[i][0] + "' style='position:absolute; display:none'>";
        submenu += "<table width = 100% cellspacing=0 style='border:1px solid #E51F1C' id='tsub" + items[i][0] + "' bgcolor='#FFFFFF' ";
        submenu += "onmouseover=\"displayMenu('sub" + items[i][0] + "')\" onmouseout=\"hideMenu('sub" + items[i][0] + "')\" ";
        submenu += "<tr>"
    
        var tmpCol = 0;
        for(ii=0;ii<items[i][2].length;ii++){
          if(items[i][2][ii][2] == "new"){var link = "location.replace('" + items[i][2][ii][1] + "')";}
          else{var link = "window.location='" + items[i][2][ii][1] + "'";}
    
          submenu += "<td class='sub' onclick=\"" + link + "\" valign='top' align='left' ";
          submenu += "onmouseover=\"this.style.background='#FFFFFF';this.style.color='#2A1771'\" ";
          submenu += "onmouseout=\"this.style.color='#2A1771'\">";
          submenu += items[i][2][ii][0] + "</td>"
    
          tmpCol++;
          if (tmpCol == 2) {
            submenu += "<td class='sub' onclick=\"" + link + "\" valign='top' align='left' ";
            submenu += "onmouseover=\"this.style.background='#FFFFFF';this.style.color='#2A1771'\" ";
            submenu += "onmouseout=\"this.style.color='#2A1771'\">";
            tmpCol = 0;
          }
        }
        submenu += "</tr>";
        submenu += "</table></div>";
        document.write(submenu);
      }
    }
    menu += "</tr></table>";
    document.write(menu);
    It looks like the attached picture

    Right, what I was thinking of to do, is to add more sub menus to these displayed submenus, for example, when I hover over Computer Literacy, all the applicable literacy courses would display underneath it, as per the first image on my first post.

    Any ideas on how to modify this, to accept more sub sub menus ¿

    An yhelp would be greatly appreciated!

    Hannes
    Last edited by HanneSThEGreaT; June 14th, 2010 at 05:44 AM.

  5. #5
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: [RESOLVED] Multi Column Menu

    OK, I played around.

    I created another js file for sub items :
    Code:
    var subitems = [
        ["Computer Awareness Course", "sliteracy.htm", "cl"],
        ["Certificate in Computer Literacy", "sliteracy.htm", "cl"], 
        ["ICDL ( Windows XP & Office 2003 )", "sliteracy.htm", "cl"],
        ["18 Month Computer Literacy", "sliteracy.htm", "cl"],
        ["Business Skills", "sliteracy.htm", "cl"],
        ["Computerised Accounting", "sliteracy.htm", "cl"],
        ["Project Management", "sliteracy.htm", "cl"],
        ["Literacy & Web Design", "sliteracy.htm", "cl"],
        ["Literacy & Computer Programming", "sliteracy.htm", "cl"],
        ["Office Practise & Computing", "sliteracy.htm", "cl"],
        ["Office Computing & Technical", "sliteracy.htm", "cl"],
        ["IT Programming & Computing", "sliteracy.htm", "cl"],
        ["IT Web Design Foundation", "sliteracy.htm", "cl"],
        ["IT Web Programming Foundation", "sliteracy.htm", "cl"],
        ["IT Programming Foundation", "sliteracy.htm", "cl"],
        ["Call Centre Agent", "sliteracy.htm", "cl"]
        ["IT Technical Foundation", "sliteracy.htm", "cl"],
        ["PC Technician & Literacy", "sliteracy.htm", "cl"],
        ["Network Technician & Literacy", "sliteracy.htm", "cl"]
        ], [
        ["Instructor Led Short Courses", "sliteracy.htm", "sub"], 
        ["Computer Literacy", "iliteracy.htm", "new"],
        ["Pastel & Business", "ipastelbusiness.htm", "new"],
        ["Programming", "iprogramming.htm", "new"],
        ["Web Design", "iwebdesign.htm", "new"],
        ["Graphic Design", "igraphicdesign.htm", "new"],
        ["Technician", "itechnician.htm", "new"]
        ],
    	["Contact Us", "contact_us.htm", null]
    ];
    This file I will use for each of the initially displayed menus, so for example, Computer Literacy, Pastel & Business, Programming etc.

    Then added this to my menu.js file :
    Code:
        for(jj=0;jj<subitems[j][1].length;ii++){
            
        var subsub = "<div id='subsub" + subitems[j][0] + "' style='position:absolute; display:none'>";
          subsub += "<table width = 100&#37; cellspacing=0 style='border:1px solid #E51F1C' id='tsubsub" + subitems[j][0] + "' bgcolor='#FFFFFF' ";
          subsub += "onmouseover=\"displayMenu('subsub" + subitems[j][0] + "')\" onmouseout=\"hideMenu('subsub" + subitems[j][0] + "')\" ";
          subsub += "<tr>"
       	  subsub += "<td class='subsub' onclick=\"" + link + "\" valign='top' align='left' ";
          subsub += "onmouseover=\"this.style.background='#FFFFFF';this.style.color='#2A1771'\" ";
          subsub += "onmouseout=\"this.style.color='#2A1771'\">";
          subsub += subitems[j][2][jj][0] + "</td>"
    
    	submenu += subsub
    And included the subitems script in my page :
    Code:
    <script language="JavaScript" src="misc/subitems.js"></script>
    <script language="JavaScript" src="misc/items.js"></script>
    <script language="JavaScript" src="misc/menu.js"></script>
    Nothing gets displayed, not even the existing working menu

    I'm losing my mind...
    Last edited by HanneSThEGreaT; November 25th, 2009 at 08:38 AM.

  6. #6
    Join Date
    May 2002
    Posts
    10,943

    Re: [RESOLVED] Multi Column Menu

    Quote Originally Posted by HanneSThEGreaT View Post
    ( I know I resolved the thread, I have another question based on this )
    Don't forget that you're a mod. You can simply removed the "[RESOLVED]" from the thread title.

    Major concerns with the following code snippet...Recursion!

    Code:
    for(jj=0;jj<subitems[j][1].length;ii++){
    When working with JavaScript, I always code in Safari and Firefox. They have very useful JavaScript debugging tools. I would suggest ditching IE for the development process.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  7. #7
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: [RESOLVED] Multi Column Menu

    Quote Originally Posted by PeejAvery View Post
    Don't forget that you're a mod. You can simply removed the "[RESOLVED]" from the thread title.
    I forgot that part, thanx!

    Quote Originally Posted by PeejAvery View Post
    Major concerns with the following code snippet...Recursion!

    Code:
    for(jj=0;jj<subitems[j][1].length;ii++){
    When working with JavaScript, I always code in Safari and Firefox. They have very useful JavaScript debugging tools. I would suggest ditching IE for the development process.
    Thanks, I'm not following, though. I've use the same principal as the existing menus, but nothing

  8. #8
    Join Date
    May 2002
    Posts
    10,943

    Re: Multi Column Menu

    You incrementing ii when you're working with jj. That causes infinite loops...I don't think that is the whole problem, but it definitely needs to be fixed.

    What does Firefox's Error Console do for you? If nothing is showing, then the Error Console has to have some good messages for you.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  9. #9
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: Multi Column Menu

    I did notice the ii, and fixed it

    I do not have access to FireFox at all, and I'll have to get permission if I have to download it.

    Should I attach my files here &#191; I know it is something silly, I guess I have been at this for too long today. Sigh, waiting for a holiday that never comes...

  10. #10
    Join Date
    May 2002
    Posts
    10,943

    Re: Multi Column Menu

    Yeah, attach your project. I'll take a look at it.

    Really, you have to get permission for it? Why is that? Can't you write this off as a necessary debugging tool?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  11. #11
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: Multi Column Menu

    Thank you very much for all your help so far. I feel really stupid! And I'm starting to think stupid thoughts about my limited knowldge, my limited patience..

    Yes, I have to get permission. It is not for the actual program itself, it is just that I have x amount of internet useage I'm allowed to use, in x amount of time. Next year it will change though.

    I'm attaching my project here.
    I'm really clueless with this thing and feel like crying like a baby.
    Last edited by HanneSThEGreaT; June 14th, 2010 at 05:44 AM.

  12. #12
    Join Date
    May 2002
    Posts
    10,943

    Re: Multi Column Menu

    Okay...two main problems. Unfortunately, one I cannot help you to fix directly because I'm not sure exactly what you are doing with the sub sub menu.

    1. You are missing a } for the main for() loop. There should be two closing brackets before the following code. Currently, you only have one.

    Code:
    menu += "</tr></table>";
    2. The code cannot properly iterate through the following for() loop because the variable j has not yet been defined.

    Code:
    for(jj=0;jj<subitems[j][2].length;jj++){
    Plus, in this case, you only need to count the first dimension. So try the following instead.

    Code:
    for(jj=0;jj<subitems.length;jj++){
    But, since I don't know exactly how you are implementing this, I cannot be more help than just that for now.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  13. #13
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Angry Re: Multi Column Menu

    Ok, that gave me one main menu item.

    I don't know how to explain what I want anymore clearer.

    I have a main menu that looks like this :

    Home, Fascilitator Based Courses, Instructor Led Courses, Contact Us.
    I have made sub menus for Fascilatator Based courses and Instructor Led Courses
    Fascilitator based looks like this :
    Fascilitator Based courses
    |_______Computer Litearcy
    |_______PAstel & Business
    |_______Programming
    |_______Web Design
    |_______Graphic Design
    |_______Technical

    That works. Now, I want to make sub menus for the existing sub menus, like this :

    Computer Litercay
    |____6 Months
    |____12 Months
    |____18 Months

    And so on

    I have tried a million times to get the existing menus.js file compatible with this, and I used the same logic, the same principal for these as well.

    Everywhere I look on any search engine, I get this crap junk where they want to sell me a program that creates this - The freaking internet is full of that crap!

    I cannot belive that I'm the only dumb guy in the world ever attempting a structure like this which no one seems to understand, it is absolutely unbelievable!

    I have totally run out of patience.

    I have got better things to do that to waste my time ( which I don't have ) on this piece of crap website of mine, really, I have better things to do!

    I'm even at the point where I will pay someone to do this crap, with money I'll have to borrow!

    Safari gives me nothing Firefox gives me Nothing

    Thanks for your help and advise though, but from this point forward, I never ever want to see another JavaScript page again!

    I'm done!

  14. #14
    Join Date
    May 2002
    Posts
    10,943

    Re: [GIVEN UP] Multi Column Menu

    Sorry to hear about your frustration. I tried modifying it around a bit, and got some things to work. Here's the problem...the code is rather old. It really isn't the best implementation for modern solutions. In fact, I ran into some major kinks because of that.

    May I suggest you go with a modern web solution? Shouldn't be difficult to implement at all. In fact, there's no JavaScript with which to wrestle...http://www.grc.com/menu2/invitro.htm
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  15. #15
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,283

    Re: [GIVEN UP] Multi Column Menu

    Firstly, sorry for letting go of my frustrations. I suppose everyone feels like that sooner or later. Me, being a mod, that behaviour is unfrogiveable and childish.

    Secondly, thanx for all your patience and all your efforts and support, you are really a beacon of light in a dark tunnel

    Thirdly. I went back to the drawing board, and started over ( although I wasn't in the mood ). I took a break, had a great weekend of eating popcorn and watching movies, and spent time with my family.

    I ended up with a menu structure like the attached picture.

    Thank you once again for everything!
    Last edited by HanneSThEGreaT; June 14th, 2010 at 05:44 AM.

Posting Permissions

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





Click Here to Expand Forum to Full Width

Featured