TCH-Thomas Posted October 12, 2003 Posted October 12, 2003 Hi everyone, On Dynamic drive (http:/dynamicdrive.com) they have a script called "Switch menu". I use this in one of my projects. In the example on DD it makes these menu-headings: Site Menu FAQ/Help Help Forum Cool Links But now I want to add 3 sub-menues to lets say Help forum. So it would look like this: Site Menu page 1 page 2 page 3 FAQ/Help page 1 page 2 page 3 Help Forum Win 95/98 page 1 page 2 page 3 Win ME page 1 page 2 page 3 Win XP page 1 page 2 page 3 Cool Links page 1 page 2 page 3 What do I add/remove/modify... to make that work? I know it was a strange explanation, but I hope you understand, otherwise just ask. -Thomas Quote
borfast Posted October 12, 2003 Posted October 12, 2003 (edited) Hi Thomas. I downloaded the script you mentioned (hope I got the right one) and took a look at how to configure it. It's quite simple. To do what you want, you just change the code you already have to look like the one below (changes are in bold): <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div> <span class="submenu" id="sub1"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div> <span class="submenu" id="sub2"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div> <span class="submenu" id="sub3"> - <a href="win9598.html.htm">Win 95/98</a><br> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> - <a href="win9598.html.htm">Win ME</a><br> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> - <a href="win9598.html.htm">Win XP</a><br> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div> <span class="submenu" id="sub4"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> </div> Hope this helps. If you need me to explain it better, just ask Edited October 12, 2003 by borfast Quote
TCH-Thomas Posted October 12, 2003 Author Posted October 12, 2003 Borfast and Rock Sign I havent tried it yet, got to happy it could be done so easily. I thought it had to be changed in those id-things, so thats why i figured i ask the script-experts here. Thanks again, Borfast. -Thomas Quote
TCH-Thomas Posted October 12, 2003 Author Posted October 12, 2003 Sorry Borfast, I tried it now and get this message: "Line 82 Error: 'document.getElementById(...)' is null or not an object" What is wrong? -Thomas Quote
borfast Posted October 12, 2003 Posted October 12, 2003 Thomas, I can't tell what's wrong without looking at the code, so could you please paste it here, so I can take a look? Not all of it, just lines 75 to 85. Thanks. Quote
TCH-Thomas Posted October 12, 2003 Author Posted October 12, 2003 Sorry, here they are (I hope its the ones you look for, 75-85): document.write(' document.write('.submenu{display: none;}\n') document.write('\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change if(el.style.display != "block"){ //DynamicDrive.com change for (var i=0; i -Thomas Quote
borfast Posted October 12, 2003 Posted October 12, 2003 (edited) Thomas, I'd say the problem is that you're not passing the right ID to the SwitchMenu() function. You have to make sure that both the name being passed to that function and the id inside the <span> tag that follows are set and are equal. <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div><span class="submenu" id="sub4"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> Edited October 12, 2003 by borfast Quote
RJSkon Posted October 12, 2003 Posted October 12, 2003 Thomas There are instructions for customizing the script at, http://dynamicdrive.com/dynamicindex1/switchmenu.htm It says that, "Physical changes (adding/deleting items) to the menu are all done in the code of Step 2." You will need an HTML Editor with a preview function to see what you are doing. I hope that this helps. Richard Quote
TCH-Thomas Posted October 13, 2003 Author Posted October 13, 2003 (edited) right ID to the SwitchMenu()The problem is that all of them are right. The script borfast pasted in here are as far as i can see the exact original script from DD and all those id´s are correct. Only thing different from original script are the additions borfast did.It´s after the Win 95/98 etc are added, this error message shows up (sorry for that, borfast).Has anyone of you tried the modified script? I´m thinking it would be nice to know if the error shows up for you too or if its local in my machine. -Thomas P.S... Yep, Rjskon, I know the physical changes are made in part 2. Edited October 13, 2003 by Tonsa Quote
TCH-JimE Posted October 13, 2003 Posted October 13, 2003 Thomas, Please provide a link to a page on your website, where your script is trying to run, and then we can take a closer look Jim Quote
TCH-Thomas Posted October 13, 2003 Author Posted October 13, 2003 I did better I figured I do a new page for this menu without any other interfering scripts. Here´s a new page with the modified script: http://www.jikrantz.com/id59.htm -Thomas P.S Now i see, that the menu isnt clickable at all though. Wonder why... This error code "82" was something that i got when previewing it, but now its not clickable at all. Quote
borfast Posted October 13, 2003 Posted October 13, 2003 (edited) Thomas, two errors on the page you linked: - 1 (not related to the problem we're discussing): CSS styles are written in lowercase, so the first two <div> tags you have on your page should read ><div style="text-align: center;"> instead of ><div style="text-align:CENTER; "> - 2: The menus must be wrapped in a <div> tag with id="masterdiv", like this: <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div> <span class="submenu" id="sub1"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div> <span class="submenu" id="sub2"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div> <span class="submenu" id="sub3"> - <a href="win9598.html.htm">Win 95/98</a><br> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> - <a href="win9598.html.htm">Win ME</a><br> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> - <a href="win9598.html.htm">Win XP</a><br> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div> <span class="submenu" id="sub4"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> </div> </div> Hope this does the trick. Right now I can't try it out (I'm in the middle of a class ) but I think it will do it. EDIT: The programmer in me couldn't resist it I tried it and it works Edited October 13, 2003 by borfast Quote
TCH-Thomas Posted October 13, 2003 Author Posted October 13, 2003 Now Im getting close to what i want, just 2 things... 1. I dont find anywhere in the code (even used wordpads search thing), could it be something CSB adds automatically? 2. Can "Windows 95/98" etc be like the headings for Site Menu, FAQ/Help, Help Forum and Cool Links so the pages are not visible until you click "windows 95/98" etc? Example: Site Menu FAQ/Help Help Forum Windows 95/98 page 1 Page 2 Page 3 Windows ME Windows XP Cool Links -Thomas P.S What are you studying, since you have time to peek in to forum or is class that boring ? Quote
borfast Posted October 13, 2003 Posted October 13, 2003 (edited) I'm not sure about the "text-align:CENTER;" stuff. It could be something that CSB adds automatically but since I have never used CSB, I can't tell for sure. I only looked at the source code of the page you provided the link for and it was there. The first one is right on line 11 of the source code, just after the <body> tag. As for your other question, yes, they can. The ideia is that each line such as ><div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div> is a main menu and, inside the following<span class="submenu" id="sub1">.....</span> tags, each link is a sub-menu. The code for what you want to do should be something like this: <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div> <span class="submenu" id="sub1"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div> <span class="submenu" id="sub2"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div> <span class="submenu" id="sub3"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Windows 95/98</div> <span class="submenu" id="sub4"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub5')">Windows ME</div> <span class="submenu" id="sub5"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub6')">Windows XP</div> <span class="submenu" id="sub6"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub7')">Cool Links</div> <span class="submenu" id="sub7"> - <a href="page1.htm">page1</a><br> - <a href="page2.htm">page2</a><br> - <a href="page3.htm">page3</a><br> </span> </div> </div> Oh, and I'm studying computer engineering. That class was about networking but the teacher was talking about basic stuff I already knew, so I opened up the TCH forums and see if someone needed my help Edited October 13, 2003 by borfast Quote
TCH-Thomas Posted October 13, 2003 Author Posted October 13, 2003 We are getting closer and closer This is almost what i want, but if possible I want the menues for "win 95/98", "Win ME" and "Win XP" INSIDE "Help Forum" so win 95/98", "Win ME" and "Win XP" is NOT visible unless you click "Help Forum". So to summarise, I do not want them as "main" menues, but as "sub" menues inside Help Forum. That is what my problem is. By the way Borfast, you are one h... of a moderator who hasnt gone tired over me yet, could it be that you are a moderator on TCH? -Thomas Rock Sign Quote
RJSkon Posted October 13, 2003 Posted October 13, 2003 Thomas Is this what you want the Switch Menu to do? Take a look here, http://rjskon.com/switch/ If it is, it's easy to add those items in that catagory. I used Microsoft as the Help Forum links. Richard Quote
TCH-Thomas Posted October 13, 2003 Author Posted October 13, 2003 I made a example of what i want here: http://www.jikrantz.com/id60.htm This one is a tree menu, but shows the structure I want with main menues and sub menues. The only difference i want, is that it is falling out down instead of down/right as a tree menu does. -Thomas Quote
RJSkon Posted October 13, 2003 Posted October 13, 2003 Thomas That Switch Menu, may not be capable of showing Sub Menus, similar to a tree menu. Richard Quote
TCH-Thomas Posted October 13, 2003 Author Posted October 13, 2003 Hm...ok, thanks anyway. I appreciate everyones temper to deal with me. Anyone knows a similar menu (to switch menu) that does only criteria is that it falls out down and not to right? -Thomas Quote
borfast Posted October 13, 2003 Posted October 13, 2003 (edited) OK, I got it, you want it to have "sub-sub-menus", right? Well, unfortunately, with this script, that doesn't seem to be possible I just tried it with something like this: ><div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div> <span class="submenu" id="sub3"> <div class="menutitle" onclick="SwitchMenu('sub9')">Microsoft</div> <span class="submenu" id="sub9"> - <a href="http://www.microsoft.com/windows98/">Win 95/98</a><br> - <a href="http://www.microsoft.com/WindowsMe/">Win ME</a><br> - <a href="http://www.microsoft.com/windowsxp/">Win XP</a><br> </span> - <a href="page1.html">page1</a><br> - <a href="page2.html">page2</a><br> </span> </div> </div> but it didn't work I know I've seen a menu script that does this but I can't remember where... I'll take a look around and let you know if I find anything. Oh, and thanks for the compliments. I guess I just like to help others on this kind of things Edited October 13, 2003 by borfast Quote
borfast Posted October 14, 2003 Posted October 14, 2003 I knew I had seen it somewhere! www.opencube.com/effect_stm.html Quote
TCH-Thomas Posted October 14, 2003 Author Posted October 14, 2003 Thanks borfast. I downloaded that and took a quick look on the configuration instructions, looks like I can handle it too. Again, Borfast and Rock Sign -Thomas Quote
TCH-Thomas Posted October 15, 2003 Author Posted October 15, 2003 Juat a little something that popped up in my head... In the project I wanna use this menu in I use 2 frames. Could that menu be used 2 times in same frame? I took a longshot and inserted it twice as it is, but nope, it didnt work, but it worked if placed one time in each frame. So can it be used twice and what do i change if so? -Thomas Quote
borfast Posted October 15, 2003 Posted October 15, 2003 I don't think you can do that, since having two menus in the same page would mean to have the same variables and elements in the same page. That would mess up the browser. Quote
TCH-JimE Posted October 15, 2003 Posted October 15, 2003 (edited) Hi, As borfast explained, you would need to change every single variable so it was not the same as the other one. You would also need to change every single ID, element and call name that is used too. If you need two menu scripts in one frame, you might want to look at how your doing your website. A good website design would not need two drop down menus like that. Jim Edited October 15, 2003 by Jimuni Quote
TCH-Thomas Posted October 16, 2003 Author Posted October 16, 2003 I know a good website desgin shouldnt need that, but since i havent found a good menu yet (havent been able to check out that open cube menu yet due to another problem discussed in another thread), it was just a solution that popped up in my head. -Thomas Quote
TCH-JimE Posted October 16, 2003 Posted October 16, 2003 Hi, Try this, any good? http://dhtmlkitchen.com/dhtml/ui/menutree/index.jsp Jim Quote
TCH-Thomas Posted October 16, 2003 Author Posted October 16, 2003 Try this, any good? Lets put it this way, I know what i will play around with today. Thanks again. -Thomas who now Quote
TCH-JimE Posted October 16, 2003 Posted October 16, 2003 Its a lovely script once you get around the naming of the ID and how its done. Got a problem, ask away Jim Quote
TCH-Thomas Posted October 17, 2003 Author Posted October 17, 2003 I have read the site now, but unfortunately I dont think its something I can use. It costs $150 and the site im gonna use it on is a volunteer thing. But thanks for helping me trying to find one. -Thomas Quote
TCH-JimE Posted October 17, 2003 Posted October 17, 2003 Intresting, I believe they have screwed up. Look at the TOU (Terms of Use) and you see: Terms of UseTerms of UseTo avoid confusion or misunderstanding, we have decided upon the following rules for our scripts. You May Use our scripts for non-commercial purposes, for free. But then it says you must pay! I suggest you email him and point this out and also point out that your a voluntary place. They give discounts upto 100% of the price so you can but try! Jim Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.