...

View Full Version : Menu help



Lepplady
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.
Thanks!

<html>

<head>
<style>
.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;}
</style>
<script>
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;
</script>

<title></title>

</head>

<body bgcolor=black>


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

<center>
<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>

</body>

</html>

vinyl-junkie
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.

Lepplady
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.

vinyl-junkie
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.

Lepplady
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.
:-)

vinyl-junkie
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.

Lepplady
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.
:-)

Lepplady
09-09-2006, 12:41 AM
I found a nifty all images menu at udm4 - thanks!
http://www.udm4.com/demos/other-imagenav-horizontal.php
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.
:-)

vinyl-junkie
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.

Lepplady
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:
http://rick-savage.net/FAQ.html
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.
*sigh*
I'll hack away at it again tomorrow.
Thanks!

vinyl-junkie
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.

Lepplady
09-12-2006, 05:52 AM
Thanks!
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.
:-)

Lepplady
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.

vinyl-junkie
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?

Lepplady
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.
http://www.udm4.com/demos/other-imagenav-horizontal.php
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:
http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm
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!

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

vinyl-junkie
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.

Lepplady
10-26-2006, 09:24 AM
Thanks!
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.
http://smileys.smileycentral.com/cat/8/8_1_233.gif



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum