JavaScript - Collapsible Menu Code?
Could someone be kind enough to provide me with code to make a collapsible menu? What I'm looking for is a vertical menu, that will open up the sub-categories upon a mouseover. Clicking on the menu item will bring them to the specific page. Oh, and this might not matter, but I'd prefer if I was able to style the menu to fit with my site theme. Thanks.
Similar TutorialsHello This is brilliant and good to work with, there is one issue i have if someone can help please. I have used example 4 bacuase it visually does exactly what i need, however there is one little problem i cant solve. I copied the div and now have 2 collapsible divs next to each other, which nearly do exactly what i need. I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i don't know how to do that. here is the code thanks the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm Code: <script type="text/javascript"> animatedcollapse.addDiv('jason', 'fade=1,height=80px') animatedcollapse.addDiv('kelly', 'fade=1,height=100px') animatedcollapse.addDiv('michael', 'fade=1,height=120px') animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets') animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets') animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1') animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state } animatedcollapse.init() </script> <div id="mobile_navigation"> <div id="sectionnav"> <a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a> <div id="dog"> The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands. </div> </div> <div id="searchnav"> <a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a> <div id="cat"> The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands. </div> </div> </div> Does anyone know of an alternative coding for this function that will do the trick in browsers such as firefox? Code: with (document) { write("<STYLE TYPE='text/css'>"); write(".hiddentext {display:none;} .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}"); write("</STYLE>"); } function expandIt(whichEl) { whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block"; } <img src="images/click.gif" onclick="expandIt(el1); return false"> <div id="el1" class="hiddentext"> ...content here... </div> Hello, I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button. Code: Spry.Widget.CollapsiblePanel.prototype.init = function(element) { this.element = this.getElement(element); this.focusElement = null; this.hoverClass = "CollapsiblePanelTabHover"; this.openClass = "CollapsiblePanelOpen"; this.closedClass = "CollapsiblePanelClosed"; this.focusedClass = "CollapsiblePanelFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.animator = null; this.hasFocus = false; this.contentIsOpen = false; }; Many thanks Liam Hello, trying to cooperate with Spry atm, and its going fairly ok.. Its just one thing, i would like it when you open one spry panel, the rest of them would close. Anyone know how to do that? Thanks Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on. When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image... Code: <script language="JavaScript" type="text/javascript"> function toggle() { var bar = document.getElementById('floater'); var barText = document.getElementById('f_news'); if (bar.style.width == '210px') { bar.style.width = '40px'; bar.style.backgroundImage = 'none'; barText.style.display = 'none'; } else { bar.style.width = '210px'; bar.style.backgroundImage = 'HELP!'; barText.style.display = 'block'; } } </script> Thanks in advance. I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now Greetings Everyone, Feels good to be a part of such a community where i can clear my doubts and seek help. I need some help and advice in making a multilevel menu. I have the code for the menu(not multilevel) and it is as below: stm_bm(["uueoehr",400,"","scripts/blank.gif",0,"","",0,0,250,0,1000,1,0,0]); stm_bp("p0",[0,4,0,0,0,1,0,0,100,"",-2,"",-2,90,0,0,"#000000","#b6daff","",3,1,1,"#b6daff"]); stm_ai("p0i0",[0," Our Campus ","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",0,"#ffff8f",0,"","",3,3,1,1,"#ffffff","#f fffff","#ff6600","#ff6600","bold 8pt Verdana","bold 8pt Verdana",0,0]); stm_bp("p1",[1,4,0,0,1,5,0,0,100,"",-2,"",-2,100,0,0,"#000000","#b6daff","",3,0,0,"#a2d0fc"]); stm_aix("p1i0","p0i0",[0,"About Us ","","",-1,-1,0,"about-us.aspx","_self","about-us.aspx","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",0,"#ffff00",0,"","",3,3,0,0,"#fffff7","#fffff7"]); stm_aix("p1i1","p1i0",[0,"Campus Facilities","","",-1,-1,0,"about-us.aspx#campus","_self","about-us.aspx#campus"]); stm_aix("p1i2","p1i0",[0,"Accrediation","","",-1,-1,0,"about-us.aspx#acc","_self","about-us.aspx#acc"]); stm_aix("p1i3","p1i0",[0,"Contact Us","","",-1,-1,0,"contact.aspx","_self","contact.aspx"]); stm_ep(); stm_ai("p0i1",[6,1,"#b6daff","",0,0,0]); stm_aix("p0i2","p0i0",[0," Future Students "]); stm_bpx("p2","p1",[1,4,0,0,1,5,0,0,100,"",-2,"",-2,90]); stm_aix("p2i0","p1i0",[0,"Entry Requirement ","","",-1,-1,0,"entry-requirement.aspx","_self","entry-requirement.aspx"]); stm_aix("p2i1","p1i0",[0,"How to Apply","","",-1,-1,0,"apply.aspx","_self","apply.aspx"]); stm_aix("p2i2","p1i0",[0,"Fees & Charges ","","",-1,-1,0,"fee.aspx","_self","fee.aspx"]); stm_aix("p2i3","p1i0",[0,"Study at Gurkhas","","",-1,-1,0,"studying.aspx","_self","studying.aspx"]); stm_aix("p2i4","p1i0",[0,"Living in Australia","","",-1,-1,0,"living-australia.aspx","_self","living-australia.aspx"]); stm_aix("p2i5", "p1i0", [0, "Important Information", "", "", -1, -1, 0, "imp-info.aspx", "_self", "imp-info.aspx"]); stm_aix("p2i6", "p1i0", [0, "ESOS Framework", "", "", -1, -1, 0, "downloads/ESOS_FrameWork.pdf", "_blank", "download.aspx"]); stm_ep(); stm_aix("p0i3","p0i1",[]); stm_aix("p0i4","p0i0",[0," Current Students "]); stm_bpx("p3","p2",[]); stm_aix("p3i0","p1i0",[0,"Student Visa Obligations","","",-1,-1,0,"student-visa.aspx","_self","student-visa.aspx"]); stm_aix("p3i1","p1i0",[0,"Policies & Procedures","","",-1,-1,0,"policy.aspx","_self","policy.aspx"]); stm_aix("p3i12", "p1i0", [0, "Student Service ", "", "", -1, -1, 0, "student-service.aspx", "_self", "student-service.aspx"]); stm_ep(); stm_aix("p0i5","p0i1",[]); stm_aix("p0i6","p0i0",[0," Courses & Fees "]); stm_bpx("p4","p2",[]); stm_aix("p4i1", "p1i0", [0, "Business & Management", "", "", -1, -1, 0, "course-business.aspx", "_self", "course-business.aspx"]); stm_aix("p4i2", "p1i0", [0, "Accounting", "", "", -1, -1, 0, "course-finance.aspx", "_self", "course-finance.aspx"]); stm_aix("p4i3","p1i0",[0,"Hospitality","","",-1,-1,0,"course-hospitality.aspx","_self","course-hospitality.aspx"]); stm_aix("p4i4", "p1i0", [0, "Information Technology", "", "", -1, -1, 0, "course-information-technology.aspx", "_self", "course-information-technology.aspx"]); stm_aix("p4i5", "p1i0", [0, "ELICOS (English)", "", "", -1, -1, 0, "course-elicos.aspx", "_self", "course-elicos.aspx"]); stm_aix("p4i6", "p1i0", [0, "Short Courses", "", "", -1, -1, 0, "short-courses.aspx", "_self", "short-courses.aspx"]); stm_ep(); stm_aix("p0i7","p0i1",[]); stm_aix("p0i8","p0i0",[0," Photo Gallery ","","",-1,-1,0,"photo-gallery.aspx","_self","photo-gallery.aspx"]); stm_aix("p0i9","p0i1",[]); stm_aix("p0i11","p0i1",[]); stm_aix("p0i12","p0i0",[0," Downloads "]); stm_bpx("p5","p2",[]); stm_aix("p5i0","p1i0",[0,"Prospectus","","",-1,-1,0,"downloads/Student_prospectus_2009.pdf","_blank","download.aspx"]); The above menu is not multi level menu. Can anyone please help me with some code so that i can make it multilevel using the above menu code. Multilevel menu same like this -> http://www.dralexmarketing.com/artic...u_preview2.gif Hello all. I need desperate help with this. The code below is two drop down menus where if you pick one of the values in the first drop down menu and pick the same exact value in the second drop down menu then it will give you an error stating that you can only select that value once. Example: if i choose T2 on the first drop down menu and select T2 on the second drop down it will print an error stating that you need to select another option. Here is where I need help. I want to have one of the drop down menus on one page named p1.html and have the other drop down on another page called p2.html. I need a solution on how to pass the information from the first drop down on p1.html to p2.html so it will know which was chosen on p1.html can anyone please help? Here is the code Code: <html> <title> hi </title> <head> </head> <body> First Choice: <select name="ThursAM_First" size="1" id="ThursAM_First" onchange="return no_dupes(this,ThursAM_Second)"> <option value="" selected>• choose •</option> <option value=""></option> <option value="T1">T1</option> <option value="T2">T2</option> <option value="T3">T3</option> <option value="T4">T4</option> </select> Second Choice: <select name="ThursAM_Second" size="1" id="ThursAM_Second" onchange="return no_dupes(this,ThursAM_First)"> <option value="" selected>• choose •</option> <option value=""></option> <option value="T1">T1</option> <option value="T2">T2</option> <option value="T3">T3</option> <option value="T4">T4</option> </select> </html> <script type="text/javascript" src="new.js"></script> Here is the javascript code that will give you an error if you select the same value twice... Code: function no_dupes(oSelect, oSelect2) { var selval = oSelect.options[oSelect.selectedIndex].v… var opt, i = 0; while (opt = oSelect2.options[i++]) if (opt.value && !opt.defaultSelected && (opt.selected && opt.value == selval)) { alert("\n Sorry, you already choose this point value for round 1. Please select another!\nThanks."); oSelect.selectedIndex = 0; return false; } } I may need to use a cookie but I have no idea how to that. Thank you all!!! Please where do I need to look to find such a script? I’ve been looking for 3 days now and I can’t find something that will have all of those. I need a floating horizontal dropdown menu, and submenu with mouse over description of the site. EX: menu 1 On the road ------- --------Restaurant .... .... ... .... ... .... .... .... ... .Mama house (home made cooking) .... .... ... .... ... .... .... .... ... .All fast food (only fast food get carb) .... .... ... .... ... Motel .... .... ... .... ... .... .... .... ... .No fleas motel (bugs free motel) .... .... ... .... ... .... .... .... ... .Pet free ( no pet allowed) Car rental Well I am sure you get the ideal. Where do I need to look or what would be the kind of scrip for that ? Java, html, css…. Please tell me to find the proper code for what I need. thanks I've been trying to figure this out for quite a while now and I am at the end of my rope here. Ok a guy wanted me to edit the template to his ZenCart installation, this is no big deal as I am a graphics guy with a tiny bit of knowledge for actually doing websites. He wants a popup menu on the top he says later and the list he gave had like 37 links...lol I didn't want to write all that out - so I bought a program that makes the menu and you just insert the code. (This works fine if I insert it into a normal html file) So I get these instructions from the program - copy this code and insert it into the webpage: Code: <script language="javascript">var MenuFolderName="";</script><script charset="UTF-8" language="javascript" src="sftmp6arrays.js"></script><script charset="UTF-8" language="javascript" src="sfmenutmp6ie.js"></script> To copy two generated files to the web directory: sftmp6arrays.js sfmenutmp6ie.js That is it. Except - ZenCart is apparently more frustrating than my girlfriend. So I find out I need to put all the JS files in a jscript folder of the template. Then I need to paste the code above into a file and save it as jscript_topmenu.js I find out - that a file called "html_header.php" makes the site load all javascript. This template doesn't have it - so I copy that file from another template and put it in the template/common/ folder. And nothing is happening. Even if I dance in circles and say magic words...nothing happens. I swear. I'm going bald. So look - I presume that I need to call that script in the tpl_header.php file but I don't know how. Then I read that I also need to get rid of the <script> </script> stuff in the js file mentioned above. I am so confused. Can someone please tell me - the idiot <- that's me so talk to me like one so I get it please. - what I need to do. I will cook you grilled cheese. I will do whatever it takes. Please put an end to this misery. Please. Thanks. Hi Everyone, I have a small doubt in jsp coding..I want to disable certain links on user login.These links come under a menu list. Clarifying more on this..I have created a web application which has got a login page..After login it redirects me to my home page..now when an administrator logs in he/she should be able to view all links on the menu list whereas when an user logs in he/she should only view a certain number of links based on his/her privileges..how can i write this code. Can anyone help me?? Its really really urgent!!!!!!!!!! please................ Hi I'm pretty new to javascript.. infact very new, only 4 days old , and I'm like this --> Anyway, I want to add a link in this menu . I want the link to be where the text " Go to the front page, Want to know more about us?, Keep in touch with us, call any time you want " How do I do that? cheers! here's the page : http://www.mts-photo.com/fotter_nav.html 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=iso-8859-1" /> <title>Jquery Tutorial : Horizontal animated menu</title> <link type="text/css" href="css/menu.css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="inc/jquery.js"></script> <script type="text/javascript" src="inc/menu.js"></script> </head> <body> <div id="wrapper"> <ul id="menu"> <li><a href="test.html" title="Go to the front page", >Home</a> </li> <li><a href="#" title="Want to know more about us?">About Us</a></li> <li><a href="#" title="Keep in touch with us, call any time you want">Contact Us</a></li> <li><a href="#" title="Ny link">Nylink 1</a></li> </ul> </div> </body> </html> I am using this fancy box code to smoothly pop up an image on click, I got it working on my main index page but that's not where I want to put it. My site has a menu where it loads webpages inside the main index one, I would like to use the code on one of those pages but something is not working. I am not able to use the specified DOCTYPE but find that it works all the same with my current one, however if I use the given one in addition to the one I have now (and need) then my site does not work properly, further if I replace it I get the same results. My existing doctype: Code: <DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> What the code uses: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> I'm not sure what the differences are but I've been advised that I need to run the code in "standards mode" before I try to fix it. As I see it the code works, just not where I need it to, nothing unusual on my site and nothing unusual that I may be wrong. On my site you can see at the bottom right a blue text link called "aaaa" this is the code that works, however (clicking the dome to the left of that to scroll the page down and selecting the "met.a has guts" menu option diagram) you'll see the "aaaa" link again at the bottom left of that page and that is where I need it to work from. I even tried using the exact code from the example in that linked .htm page but it doesn't make a difference, it probably even hinders the code as it looks at the main html page. But if loading the page on its own the code will work, so its related to the menu and the way that works. If anybody can help that would be brilliant, I'm sure its something simple. Thanks! basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text.. now what i need is a way to change all of these fields with a fetch button. i can get the value for the fields from the perl script on my server side. the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted . i am struggling with the simplist of codes to set the value of the fields from a javascript variable any ideas please. Hi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code: <ul> <li><a href="1.php">Things</a></li> <li><a href="2.php">Animals</a> <ul> <li><a href="2-1.php">Cani</a> <ul> <li><a href="2-1-1.php">Domestic dogs</a></li> <li><a href="2-1-2.php">Wolves</a></li> </ul> </li> <li><a href="2-2.php">Felidae</a> <ul> <li><a href="2-2-1.php">Domestic cats</a></li> <li><a href="2-2-2.php">Wild cats</a></li> </ul> </li> </ul> </li> <li><a href="3.php">Humans</a></li> </ul> the css is as follows: Code: div#s1 { width: 200px; /* menu width */ } div#s1 ul { background-color: #036; list-style-type: none; /* get rid of the bullets */ padding:0; /* no padding */ margin:0; /* no margin for IE either */ } div#s1 ul li { margin: 0; padding: 0; background-color: #036; display:block; border-top: 1px solid white; /* lines */ } div#s1 ul li a { display: block; /* lines extend to right, make area clickable */ color: white; background-color: #036; padding: 3px 3px 3px 23px; margin:0; text-decoration: none; height:15px; /* hint for IE, alternatively remove whitespace from HTML */ } div#s1 ul ul li a { margin-left: 20px; /* indent level 1 */ } div#s1 ul ul ul li a { margin-left: 40px; /* indent level 2 */ } div#s1 ul ul ul ul li a { margin-left: 60px; /* indent level 3 */ } div#s1 li ul, div#s1 li.open li.closed ul { display: none; /* collapse */ } div#s1 li.open ul { display: block; /* expand */ } div#s1 ul li.open a { background-image: url(bullet_open.gif); background-repeat: no-repeat; } div#s1 ul li.closed a { background-image: url(bullet_closed.gif); background-repeat: no-repeat; } div#s1 ul li.leaf a { background-image: url(bullet_leaf.gif); background-repeat: no-repeat; } div#s1 li.active a { background-position: 0px -20px; color: red; /* highlight text */ } div#s1 li.active li a { background-position: 0px 0px; color: white; /* fix lower levels */ } div#s1 ul li a:hover { color: red; background-color: #06C; /* rollover effect */ } and finally the javascript: Code: var menu_active_class = "active"; var menu_leaf_class = "leaf"; var menu_open_class = "open"; var menu_closed_class = "closed"; //the default page that is displayed if URL ends in / var menu_default_page = "index.php"; var menu_url; //main function //menu_id : id of the element containing the navigation function menu_main(menu_id) { var url = location.href; if (url.lastIndexOf("/") == (url.length-1)) { url = url+menu_default_page; } if (url.lastIndexOf("?") >= 0) { url = url.substring(0, url.lastIndexOf("?")); } if (url.lastIndexOf("#") >= 0) { url = url.substring(0, url.lastIndexOf("#")); } menu_url = url; var main = document.getElementById(menu_id); if (!main) alert("No element with id '"+ menu_id +"' found"); menu_traverse(main); } /* Walks down the subtree and on the way back sets properties. returns bit set 1: set = element is a node, unset = element is a leaf 2: set = element contains the active node 4: set = element is the active A node */ function menu_traverse(element) { var props = 0; // walk down for (var i=0; i<element.childNodes.length; i++) { var child = element.childNodes[i]; props |= menu_traverse(child); // aggregate bits } // on the way back now switch (element.tagName) { case "UL": props |= 1; break; case "LI": var c1 = (props & 1) ? ((props & (2|4)) ? menu_open_class : menu_closed_class) : menu_leaf_class; element.className = element.className ? element.className+" "+c1 : c1; if (props & 4) { if (!(props & 2)) element.className += " "+menu_active_class; props |= 2; props &= 1 | 2; // reset bit 4 } break; case "A": if (props & 2) break; // once is enough var href = element.getAttribute("href"); if (menu_isSameUrl(menu_url, href)) props |= 4; break; } return props; } //matches two URIs when href is the last part of url //.. and . are correctly resolved function menu_isSameUrl(url, href) { var a = url.split(/[?\/]/i); var b = href.split(/[?\/]/i); var i = a.length - 1; var j = b.length - 1; while ((i >= 0) && (j >= 0)) { if (b[j] == "..") { j-=2; continue; } if (a[i] == "..") { i-=2; continue; } if ((b[j] == ".") || (b[j] == "")) { j--; continue; } if ((a[i] == ".") || (a[i] == "")) { i--; continue; } if (! (a[i] == b[j])) return false; i--; j--; } return true; } New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.
I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); |