View Full Version : Menu help

09-05-2006, 02:06 AM
I've come up with this start for a menu for my site, but I can't figure out how to add submenus, and I can't figure out how to make the menu bg-color opaque.
Can anybody help?
How and where do I add a submenu?
How do I make the bg semi-seethru?
Please email me.


.fifteenth{position:absolute;width:170px;background-color:transparent;border:1px solid white;font:normal 13px Verdana;line-height:19px;z-index:99;visibility:hidden;}.fifteenth a{text-decoration:none;color:red;padding-left:10px;padding-right:10px;}#sixteenth{background-color:highlight;}#sixteenth a{color:white;}
var seventeenth=new Array();seventeenth[0]='<div class="fdspoia"><a href="http://rick-savage.net/sitelinks.html">Site links</a></div>';seventeenth[0]+='<hr>' ;seventeenth[0]+='<div class="fdspoia"><a href="http://dir.groups.yahoo.com/dir/Music/Genres/Rock_and_Pop/Artists/Complete_Category_Listing/Def_Leppard?show_groups=1">Yahoo groups</a></div>';seventeenth[0]+='<div class="fdspoia"><a href="http://partners.search.msn.com/partner.asp?q=Rick+Savage&FORM=COENUS&dom=groups.msn.com&v=1&cfg=COENUS">MSN groups</a></div>';var eighteenth=document.all&&navigator.userAgent.indexOf("Opera")==-1;var nineteenth=document.getElementById&&!document.all;var twentieth=document.layers;
function first2(second2,third2){
if (!document.all&&!document.getElementById&&!document.layers)return;fourth2();fifth2=eighteenth? document.all.sixth2 : nineteenth? document.getElementById("sixth2") : twentieth? document.sixth2 : "";fifth2.twentieth3=(eighteenth||nineteenth)? fifth2.style : fifth2;
if (eighteenth||nineteenth)fifth2.innerHTML=third2;
else{fifth2.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="fourth2()" onmouseout="fourth4()">'+third2+'</layer>');fifth2.document.close();}fifth2.nineteenth3=(eighteenth||nineteenth)? fifth2.offsetWidth : fifth2.document.gui.document.width;fifth2.first4=(eighteenth||nineteenth)? fifth2.offsetHeight : fifth2.document.gui.document.height;fifteenth3=eighteenth? event.clientX : nineteenth? second2.clientX : second2.x;sixteenth3=eighteenth? event.clientY : nineteenth? second2.clientY : second2.y;var seventeenth3=eighteenth? document.body.clientWidth-fifteenth3 : window.innerWidth-fifteenth3;var eighteenth3=eighteenth? document.body.clientHeight-sixteenth3 : window.innerHeight-sixteenth3;
if (seventeenth3<fifth2.nineteenth3)fifth2.twentieth3.left=eighteenth? document.body.scrollLeft+fifteenth3-fifth2.nineteenth3 : nineteenth? window.pageXOffset+fifteenth3-fifth2.nineteenth3 : fifteenth3-fifth2.nineteenth3;
else fifth2.twentieth3.left=eighteenth? document.body.scrollLeft+fifteenth3 : nineteenth? window.pageXOffset+fifteenth3 : fifteenth3;
if (eighteenth3<fifth2.first4)fifth2.twentieth3.top=eighteenth? document.body.scrollTop+sixteenth3-fifth2.first4 : nineteenth? window.pageYOffset+sixteenth3-fifth2.first4 : sixteenth3-fifth2.first4;
else fifth2.twentieth3.top=eighteenth? document.body.scrollTop+event.clientY : nineteenth? window.pageYOffset+sixteenth3 : sixteenth3;fifth2.twentieth3.visibility="visible";return false;}
function second4(twelfth4, third4) {while (third4.parentNode)
if ((third4 = third4.parentNode) == twelfth4)return true;return false;}
function fourth4(){
if (window.fifth2)fifth2.twentieth3.visibility=(eighteenth||nineteenth)? "hidden" : "hide";}
function fifth4(second2){
if (eighteenth&&!fifth2.contains(second2.toElement))fourth4();
else if (nineteenth&&second2.tenth4!= second2.ninth4&& !second4(second2.tenth4, second2.ninth4))fourth4();}
function thirteenth4(){
if (eighteenth||nineteenth||twentieth)fourteenth4=setTimeout("fourth4()",9 * eleventh3);}
function fourth2(){
if (window.fourteenth4)clearTimeout(fourteenth4);}
function fifteenth4(second2,eleventh4){
if (document.all)fdstyra=event.srcElement;
else if (document.getElementById)fdstyra=second2.eighth4;
if (fdstyra.fdsiopa=="fdspoia"){fdstyra.id=(eleventh4=="on")? "sixteenth" : "";}
else{while(fdstyra.id!="sixth2"){fdstyra=document.getElementById? fdstyra.parentNode : fdstyra.parentElement;
if (fdstyra.fdsiopa=="fdspoia"){fdstyra.id=(eleventh4=="on")? "sixteenth" : "";}}}}
if (eighteenth||nineteenth)document.onclick=fourth4;



<body bgcolor=black>

<div id="sixth2" class="fifteenth" onMouseover="fourth2();fifteenth4(event,'on')" onMouseout="fifteenth4(event,'off');fifth4(event)"></div>

<a href='#' onMouseover="if (document.images) document.navlinks.src= 'http://rick-savage.net/navlinks.jpg'; first2(event,seventeenth[0])" onMouseout="if (document.images) document.navlinks.src= 'http://rick-savage.net/navfadelinks.gif';"><img src="http://rick-savage.net/navcon7b.jpg" name=navlinks border=0 alt=""></a>



09-05-2006, 06:49 AM
Welcome to CodingForums, Lepplady. :)

You need to use code tags (see the # icon on the message reply screen). Secondly, you really need to format your code better. What you have here reads like a novel. It's doubtful anyone will take the time to try and decipher what it's currently doing.

09-05-2006, 07:41 AM
That's why I need help.
If this isn't going to get the job done, can somebody hook me up with a simpler menu with submenus that I can customize to mouseover with my own images?
I'd appreciate any help.

09-05-2006, 01:12 PM
I'm curious if this is some code generating software that you're trying to hand-modify? If so, it's better work within the software to do that. Otherwise, you're better off just scrapping this and starting with something else. Try looking at udm4 (http://www.udm4.com/). It makes some very stylish menus, plus it seems like it would be fairly easy to modify to suit your needs.

09-06-2006, 12:52 AM
I got it online somewhere. Some "here, use this menu code for free" type of thing.
To be honest, I don't have the first clue about menu code, as I'm sure is obvious. I'm still trying to figure it out. I'm happy that I was able to get a menu to drop down and still get the mouseover effect I wanted for the image. I already have a simple mouseover/link thing going on my site, and wanted to include a menu for easier navigation since I've accumulated so many pages over the years.
I've found a couple great multilevel menus that will let me modify the colors, but not one (yet) that will give me the mouseover effect I wanted for the pictures I'm already using. It's simple, I know, but I like how that looks.
I wish I knew how to just write the code for it, but I'm not there yet.

Thanks, I'll have a look and hope to find something I can modify the way I want.
I really appreciate the comment.

09-06-2006, 01:01 AM
Even free code isn't worth it if it really doesn't explain how to customize it for your needs.

I'll be interested to know how you get on with udm4. I've played around with it a bit but that's about it. I really like the features it offers though.

09-07-2006, 03:39 AM
I've seen a brothercake top nav menu before, and I know it' easily customizable for color and font and so forth.
I'm going to have to fiddle with it, though, and see if I can get the image mouseover effect I want as well.
If not, I may have to stick with the novel above and forget about submenus.
I really hope I get it to work, tho.
Will let you know how I fare.

09-09-2006, 12:41 AM
I found a nifty all images menu at udm4 - thanks!
It looks like it's easily customizable for somebody who has a clue about such things. I feel like a real doof for not being able to. But I'm dogged when I decide upon something, and I will figure it out. I've got a javascript menu editor, and I'll figure this out, yet! (Might even try lifting the code from the demo page and puttering around with that to see how to do it. But will leave all copywrites in place, of course.)
Thanks again for leading me in this direction.

09-09-2006, 02:35 AM
Thanks again for leading me in this direction.
You're welcome. :) Are you putting this on the site listed in your user profile? If not, post the link when you're done so we can have a look at the finished product. Thanks.

09-09-2006, 03:23 AM
Yes, that's where it's going to go, if I ever figure it out. Rick-Savage.net.
You can see the rollover image link bar that's already there on the faq page, for example:
I want it to continue to look just like that, with the mouseover effect, but also drop down a menu (with submenus) on mouseover.
I've been fiddling with the brothercake all image menu, and I'm thoroughly frustrated. I know it's right there, right in front of me, but the pieces haven't snapped into place for me. I configure the files the way they said, upoload it to a test page, and it still comes out looking like an outline, with bullets, rather than a menu. I don't know if I've got conflicting .css files, or if I'm just doing something wrong. Either way, I'm really frustrated.
I'll hack away at it again tomorrow.

09-09-2006, 08:03 AM
Just remember that if you really get stuck, don't be afraid to ask us for help. That's what we're here for.

09-12-2006, 05:52 AM
I haven't had a chance to really spend time with it because my book's deadline got bumped up by 2 months. Eep. So I'm working on that like a madwoman. But I've got this forum bookmarked and I'll be checking back when I do get the time to look at the menu.
Thanks for being so helpful.

10-15-2006, 11:24 PM
I just don't understand what I'm doing wrong.
I went through Brothercake's tutorial and did everything it said. I customized the custom.js, uploaded all the files to my server, made sure all the links were right, and wrote the page code according to how it said, and I still get a page that reads like an outline. It's all text. No pictures.
I just don't get it.

10-16-2006, 12:43 AM
Has your code changed since your original post? If so, you might want to post the new code. Also, which browser are you trying to view it in? IE6? FF? Something else?

10-18-2006, 08:37 AM
I've long since abandoned the code I first posted. I'm trying now to use Brothercake's all images horizontal menu.
But can't view it in my site with IE6, even though I can view their demo.
I'm stumped.
So I think I'll try to adapt the horizontal option of this one next:
Wish me luck.

I know that the answer is looking me straight in the eye, and I don't mind admitting that I've never been as frustrated figuring out a bit of code as I have been with this. I know it can be done, and I know it's probably easier than I'm making it, but I just don't get it. I know I will, but this has been one serious pain in my keister.

Thanks for all the helpful suggestions along the way!

10-26-2006, 05:37 AM
I got it!
You can see what my menu looks like here:
Next, I'll incorporate it into the rest of my site.
Thanks for all your help!

10-26-2006, 05:51 AM
Good show! :thumbsup: One thing that is missing from it though is that your menu is totally non-functional when javascript is disabled. Probably doesn't affect too many of your site's visitors but just something to keep in mind. Still, you should provide an alternate menu that only shows up when javascript is disabled.

10-26-2006, 09:24 AM
For that, I think I'll slap a "Site Map" link at the bottom and create a page with all the other pages on the site listed by way of regular html links. Figuring this menu business out was enough grief as it was.