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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem facing with nested menus

    I am facing problem with javascript nested menus. I am able to get 1st menus successfully. But not the second level (For Ex. When mouse is placed on Query, I am not getting Create Query, Modify Query, ... etc.). Can somebody tell me where I am doing mistake? Here the code I am using. Please see the next message to get the complete code.

    var MFL = 0; // MENU DISTANCE FROM EDGE
    var MFT = 24; // MENU DISTANCE FROM TOP
    var ALIGN = "left"; // MENU LEFT OR RIGHT
    var TMH = 22; // TOP MENU HEIGHT
    var TMFS = "8"; // TOP MENU FONT SIZE
    var TMFW = "bold"; // TOP MENU FONT WEIGHT bold/normal
    var TMFF = " arial, verdana, helvetica, sans"; // TOP MENU FONT FACE
    var TMC = "DFCFDC"; // TOP MENU OFF FONT COLOR
    var TMBC = "311028"; // TOP MENU OFF BACKGROUND COLOR
    var TMBI = "picts/menu.gif"; // TOP MENU OFF BACKGROUND IMAGE
    var TMHC = "000000"; // TOP MENU HOVER TEXT COLOR
    var TMHBC = "C0C0C0"; // TOP MENU HOVER BACKGROUND COLOR
    var TMHBI = "picts/menuon.gif"; // TOP MENU HOVER BACKGROUND IMAGE
    var MO = TMH-2; // Y MENU OVERLAP CHANGE NUMBER VALUE
    var SUBshift = 0; // SHIFT SUBMENU RIGHT

    // START SUBMENU OPTIONS - you will find more options in the corporatestyle.css

    var SMH = 20; // SUB MENU HEIGHT
    var SMFS = "8"; // SUB MENU FONT SIZE
    var SMFW = "normal"; // SUB MENU FONT WEIGHT bold/normal
    var SMFF = "arial,MS Sans Serif,sans-serif"; // SUB MENU FONT FACE
    var SMC = "333333"; // SUB MENU OFF FONT COLOR
    var SMBC = "FFFFFF"; // SUB MENU OFF BACKGROUND COLOR
    var SMHC = "FFFFFF"; // SUB MENU HOVER TEXT COLOR
    var SMHBC = "999999"; // SUB MENU HOVER BACKGROUND COLOR

    // Menu data structure
    function MenuArray() {
    this.link = new Array();
    this.text = new Array();
    this.target = new Array();
    this.parent = new Array();
    this.id = new Array();
    this.length = 0;
    this.addMenuDetails = function (l, t, tg, p, mid) {
    this.link[this.length] = l;
    this.text[this.length] = t;
    this.target[this.length] = tg;
    this.parent[this.length] = p;
    this.id[this.length] = mid;
    this.length++;
    }
    }

    var mArr = new MenuArray();
    mArr.addMenuDetails("", "Personalize", "", -1, "0"); // 0
    mArr.addMenuDetails("", "Queries & Reports", "", -1, "1"); // 1
    mArr.addMenuDetails("", "Reviews", "", -1, "2"); // 2
    mArr.addMenuDetails("", "Administration", "", -1, "3"); // 3
    mArr.addMenuDetails("", "Help", "", -1, "4"); // 4
    mArr.addMenuDetails("logout.html", "Logout", "", -1, "5"); // 5
    mArr.addMenuDetails("cprofile.html", "Change Profile", "", 0, ""); // 6
    mArr.addMenuDetails("cpasswd.html", "Change Password", "", 0, ""); // 7
    mArr.addMenuDetails("", "Query", "", 1, "6"); // 8
    mArr.addMenuDetails("", "Report", "", 1, "7"); // 9
    mArr.addMenuDetails("areviews.html", "My Active Reviews", "", 2, ""); // 10
    mArr.addMenuDetails("planreview.html", "Plan a Review", "", 2, ""); // 11
    mArr.addMenuDetails("items.html", "Manage Review Items", "", 2, ""); // 12
    mArr.addMenuDetails("", "Project Administration", "", 3, "8"); //13
    mArr.addMenuDetails("", "qTools Administration", "", 3, "9"); // 14
    mArr.addMenuDetails("overview.html", "qTools Overview", "_blank", 4, ""); // 15
    mArr.addMenuDetails("about.html", "About qTools", "_blank", 4, ""); // 16
    mArr.addMenuDetails("cquery.html", "Create Query", "", 8, ""); // 17
    mArr.addMenuDetails("mquery.html", "Modify Query", "", 8, ""); // 18
    mArr.addMenuDetails("rquery.html", "Run Query", "", 8, ""); // 19
    mArr.addMenuDetails("creport.html", "Create Report", "", 9, ""); // 20
    mArr.addMenuDetails("mreport.html", "Modify Report", "", 9, ""); // 21
    mArr.addMenuDetails("rreport.html", "Run Report", "", 9, ""); // 22
    mArr.addMenuDetails("projusers.html", "Project Users", "", 13, ""); // 23
    mArr.addMenuDetails("areviews.html", "Reviews", "", 13, ""); // 24
    mArr.addMenuDetails("aitems.html", "Review Items", "", 13, ""); // 25
    mArr.addMenuDetails("users.html", "Users", "", 14, ""); // 26
    mArr.addMenuDetails("products.html", "Products", "", 14, ""); // 27
    mArr.addMenuDetails("projects.html", "Projects", "", 14, ""); // 28
    mArr.addMenuDetails("components.html", "Components", "", 14, ""); // 29

    var Sub_Menu_Width=new Array();
    var Top_Width=new Array();
    Top_Width[0]=125;
    Sub_Menu_Width[0]=150;
    Top_Width[1]=125;
    Sub_Menu_Width[1]=150;
    Top_Width[2]=125;
    Sub_Menu_Width[2]=150;
    Top_Width[3]=125;
    Sub_Menu_Width[3]=150;
    Top_Width[4]=150;
    Sub_Menu_Width[4]=175;
    Top_Width[5]=150;
    Sub_Menu_Width[5]=175;

    // IF YOU ADD ANOTHER TOP LEVEL MENU YOU MUST ADD TO THE BOTTOM OF THIS LIST

    var ADJ=new Array();
    ADJ[0]=MFL;
    ADJ[1]=(Top_Width[0])+MFL;
    ADJ[2]=(Top_Width[0]+Top_Width[1])+MFL;
    ADJ[3]=(Top_Width[0]+Top_Width[1]+Top_Width[2])+MFL;
    ADJ[4]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3])+MFL;
    ADJ[5]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3]+Top_Width[4])+MFL;
    ADJ[6]=(Top_Width[0]+Top_Width[1]+Top_Width[2]+Top_Width[3]+Top_Width[4]+Top_Width[5])+MFL;

  • #2
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    // Detect the browser and version
    var browser_version = parseInt(navigator.appVersion);
    var browser_type = navigator.appName;

    var BWD=new DETECT();

    var spn;
    var l;
    var r;
    var c;
    var lf;
    var fc;

    StartMenu();

    SubMenu();

    // START WRITING TOP LEVEL MENUS
    var topMenu = GetParentArray(-1);
    for (var i=0; i < topMenu.length; i++) {
    document.write("<div style='position:absolute;"+ALIGN+":"+ADJ[i]+";top:"+MFT+";width:"+Top_Width[i]+"' onmouseover='o["+i+"].ShowMenu()' onmouseout='o["+i+"].HideMenu()'>");
    if (browser_type == "Netscape") {
    if (mArr.link[topMenu[i]] == "") {
    document.write("<font class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"'>"+mArr.text[topMenu[i]]+"</font>");
    } else {
    document.write("<a class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"' href='"+mArr.link[topMenu[i]]+"'>"+mArr.text[topMenu[i]]+"</a>");
    }
    } else {
    if (mArr.link[topMenu[i]] == "") {
    document.write("<font class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"' onmouseover=\"this.style.backgroundColor='#"+TMHBC+"';this.style.color='"+TMHC+"';this.style.backgro undImage='URL("+TMHBI+")'\" onmouseout=\"this.style.backgroundColor='#"+TMBC+"';this.style.color='"+TMC+"';this.style.background Image='URL("+TMBI+")'\">"+mArr.text[topMenu[i]]+"</font>");
    } else {
    document.write("<a class='menu_TOP' style='height:"+TMH+"; color:#"+TMC+"; background-image: url("+TMBI+"); background-color:#"+TMBC+"; font-size:"+TMFS+"pt; font-weight:"+TMFW+"; font-family: "+TMFF+"; "+spn+"' onmouseover=\"this.style.backgroundColor='#"+TMHBC+"';this.style.color='"+TMHC+"';this.style.backgro undImage='URL("+TMHBI+")'\" onmouseout=\"this.style.backgroundColor='#"+TMBC+"';this.style.color='"+TMC+"';this.style.background Image='URL("+TMBI+")'\" href='"+mArr.link[topMenu[i]]+"'>"+mArr.text[topMenu[i]]+"</a>");
    }
    }
    document.write("</div>");
    }

    // START WRITING SUB MENUS
    for (i=0; i < topMenu.length; i++) {
    var subMenu = GetParentArray(topMenu[i]);
    if (subMenu.length > 0) {
    document.write("<div id='SUB"+mArr.id[topMenu[i]]+"' class='menu_DIV' style='position: absolute; "+ALIGN+":"+(ADJ[i]+SUBshift)+";top:"+(MFT+MO)+";width:"+Sub_Menu_Width[i]+";background-color:#"+SMBC+";' onmouseover='o["+i+"].ShowMenu()' onmouseout='o["+i+"].HideMenu()'>");
    var s = "";
    for (var j = 0; j < subMenu.length; j++) {
    if (mArr.link[subMenu[j]] == "") {
    s += "<div onmouseover='o["+mArr.id[subMenu[j]]+"].ShowMenu()' onmouseout='o["+mArr.id[subMenu[j]]+"].HideMenu()'>" + lf + mArr.text[subMenu[j]] + fc + "</div>";
    s += "<div id='SUB"+mArr.id[subMenu[j]]+"' class='menu_DIV' style='position: absolute; "+ALIGN+":"+(ADJ[i]+SUBshift)+";top:"+(MFT+MO)+";width:"+Sub_Menu_Width[i]+";background-color:#"+SMBC+";' onmouseover='o["+mArr.id[subMenu[j]]+"].ShowMenu()' onmouseout='o["+mArr.id[subMenu[j]]+"].HideMenu()'>";
    var subSub = GetParentArray(subMenu[j]);
    for (var si = 0; si < subSub.length; si++) {
    s += l + mArr.link[subSub[si]] + r + mArr.text[subSub[si]] + c;
    }
    s += "</div>";
    } else {
    s += l + mArr.link[subMenu[j]] + r + mArr.text[subMenu[j]] + c;
    }
    }
    document.write(s);
    } else {
    document.write("<div id='SUB"+mArr.id[topMenu[i]]+"'>");
    }
    document.write("</div>");
    }

    function StartMenu() {
    if(BWD.ie) {
    spn=" width: 100%";
    } else {
    spn="";
    }
    }

    function SubMenu() {
    document.write("<table cellpadding='0' cellspacing='0' border='0' width='100%' BGCOLOR='#242440'><tr><td>");
    document.write("<img src='picts/spacer.gif' width='100%' height='"+TMH+"'><br>");
    document.write("</td></tr></table>");

    document.write("<div width='100%' style='height:"+TMH+";position:absolute;top:"+MFT+";width:100%;background-image: url("+TMBI+"); background-color:#"+TMBC+";z-level:-2'></div>");

    browser_version= parseInt(navigator.appVersion);
    browser_type = navigator.appName;
    if (browser_type == "Netscape") {
    l="<a class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"' href='";
    lf="<font class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"'>";
    } else {
    l="<a class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"' onmouseover=\"this.style.backgroundColor='#"+SMHBC+"';this.style.color='"+SMHC+"'\" onmouseout=\"this.style.backgroundColor='#"+SMBC+"';this.style.color='"+SMC+"'\" href='";
    lf="<font class='menu_SUB' style='height:"+SMH+"; color:#"+SMC+"; background-color:#"+SMBC+"; font-size:"+SMFS+"pt; font-weight:"+SMFW+"; font-family: "+SMFF+";"+spn+"' onmouseover=\"this.style.backgroundColor='#"+SMHBC+"';this.style.color='"+SMHC+"'\" onmouseout=\"this.style.backgroundColor='#"+SMBC+"';this.style.color='"+SMC+"'\">";
    }
    r="'>";
    c="</a>";
    fc="</font>";
    }

    function GetParentArray (parid) {
    var parArr = new Array();
    var j = 0;
    for (var i = 0; i < mArr.length; i++) {
    if (mArr.parent[i] == parid) {
    parArr[j++] = i;
    }
    }
    return parArr;
    }

    function DETECT() {
    this.ver = navigator.appVersion;
    this.agent = navigator.userAgent;
    this.dom = document.getElementById?1:0;
    this.opera5 = this.agent.indexOf("Opera 5")>-1;
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6;
    this.mac=this.agent.indexOf("Mac")>-1;
    this.ns6=(this.dom && parseInt(this.ver)>=5)?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.BWD=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5);
    return this;
    }

    function lib_obj(obj,nest) {
    nest=(!nest) ? "":'document.'+nest+'.';
    this.evnt=BWD.dom? document.getElementById(obj):BWD.ie4?document.all[obj]:BWD.ns4?eval(nest+"document.layers." +obj):0;
    this.css=BWD.dom||BWD.ie4?this.evnt.style:this.evnt;
    this.ref=BWD.dom||BWD.ie4?document:this.css.document;
    this.x=parseInt(this.css.top)||this.css.pixeltop||this.evnt.offsettop||0;
    this.y=parseInt(this.css.left)||this.css.pixelleft||this.evnt.offsetleft||0;
    return this
    }

    lib_obj.prototype.ShowMenu = function() {
    this.css.visibility="visible"
    }

    lib_obj.prototype.HideMenu = function() {
    this.css.visibility="hidden"
    }

    function libinit() {
    var j = 0;
    for (var i=0; i < mArr.id.length; i++) {
    if (mArr.id[i] != "") {
    o[j]=new lib_obj("SUB" + mArr.id[i]);
    o[j].HideMenu();
    j++;
    }
    }
    }

    var o = new Array();
    libinit();

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by svgkraju
    Can somebody tell me where I am doing mistake?
    Your first mistake is using Javascript to create a menu. Your second is not posting your code inside code tags. Your third mistake is not posting something to show us what it's suppose to look like or how it's suppose to work.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #4
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please find the complete source code at

    http://www.geocities.com/svgkraju/subMenu.html

    Save the html source and remove contents before <html> and after </html> tags.

    regds
    -raju

  • #5
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When mouse is placed over Queries & Reports I am getting Query and Report submenu. But when mouse is placed over Query, I am not getting the submenu with "Create Query, Modify Query, Run Query" sub sub menu.
    regds
    -raju

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A CSS problem, not a javascript one.

    In the styling for menu_DIV, remove filter:alpha(opacity=100);

  • #7
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Take this code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>57438</title>
    	</head>
    	<body>
    		<ul id="nav">
    			<li>
    				<a href="">Personalise</a>
    				<ul>
    					<li><a href="">Change profile</a></li>
    					<li><a href="">Change password</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="">Queries &amp; Reports</a>
    				<ul>
    					<li>
    						<a href="">Query</a>
    						<ul>
    							<li><a href="">Create query</a></li>
    							<li><a href="">Modify query</a></li>
    							<li><a href="">Run query</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="">Report</a>
    						<ul>
    							<li><a href="">Create report</a></li>
    							<li><a href="">Modify report</a></li>
    							<li><a href="">Run report</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li>
    				<a href="">Reviews</a>
    				<ul>
    					<li><a href="">My active reviews</a></li>
    					<li><a href="">Plan a review</a></li>
    					<li><a href="">Manage review items</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="">Administration</a>
    				<ul>
    					<li>
    						<a href="">Project administration</a>
    						<ul>
    							<li><a href="">Project users</a></li>
    							<li><a href="">Reviews</a></li>
    							<li><a href="">Review items</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="">qTools administration</a>
    						<ul>
    							<li><a href="">Users</a></li>
    							<li><a href="">Products</a></li>
    							<li><a href="">Projects</a></li>
    							<li><a href="">Components</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li>
    				<a href="">Help</a>
    				<ul>
    					<li><a href="">qTools overview</a></li>
    					<li><a href="">About qTools</a></li>
    				</ul>
    			</li>
    			<li><a href="">Logout</a></li>
    		</ul>
    	</body>
    </html>
    and use the Suckerfish methods to turn it into a menu.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).


  •  

    Posting Permissions

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