Menu not displaying - {SOLVED}

[posword]

I already have the menu in operation at http://peterwade.com in the right-
hand column.

I'm trying to develop it with the latest version as a horizontal menu but
cannot get the menu to display at all on my test system. It seems the
separate file used on my site called main_menu.js is now incorporated into menu_data.js, and I've done that for this update.

>> I've removed all the html as it is no longer relevant to this query. The problem was in my changes to the menu_data.js file.

~~~~~~~~~~~~~~~~~~~~~~~~~~
Any help would be appreciated.

Peter

[John]

First things first, Peter.

You're 20 versions down-level in the menu software you're running. You are at v5.753, current is v5.773 (with v5.774 right around the corner). The current version is required for support here in the forum.

Get upgraded, and if you're still having problems come on back and we'll go from there.

[posword]

Thanks for the reply, John.

However, the menu currently on the site might be old, but the one I am developing on my test system is already 5.773. So that's already taken care of.

Cheers,
Peter

[John]

Peter,

If the site you're having problems with is not the site you gave the link for, then we need a link to the problem-child so we can see what's actually happening.

[posword]

Well, I've made some advances and the results can be viewed at...
http://www.peterwade.com/menutest.html

There are a few issues remaining:

1. I can't seem to center the whole menu over the 760 pixels.

2. In order to get the main menu items spaced across the page evenly I've had to fiddle with the separatorsize=9.5; command. Is there a way to do this automatically?

3. Error: The "Our Site" submenu is wrongly placed... it should be flush to the right edge of the "Our Site" menu block. It has the same command (openstyle="rtl";) as the "Other Pages" main menu and that submenu is positioned correctly.

4. Is there any way to make the offsubmenu color 75% opacity?

Thanks,
Peter

[Ruth]

Hi,

Before I answer, a couple of things: You need to fix how you have the menu. Since you are calling it in the table cell, I have to assume you want it there, so you need to place it correctly. You need to put position="relative"; into the main menu, then at the top of the data file up by the suboffsets area add buildAfterLoad=true; That's required given the method you are using to put it in the table. See this page for a description of the methods you can use

http://support.milonic.com/beginners/ta ... /index.htm

also, since you want it to spread out, you can eliminate the menualign="center"; from the main menu.

Now to answer your questions

1 & 2. To get the menu to spread out over the whole cell and the items to spread out, add itemwidth="100%"; that will do it.

3. The Our Site problem is due to the built in collision detection which is forcing it to move way left. Add ignoreCollisions=true; up at the top where you put the buildAfterLoad=true; with the subOffset stuff.

4. Nope, not as far as I know unless you use images and kind of design them like that.

By the way, just out of curiosity, is there some reason you are putting in the offbgcolor, onbgcolor, oncolor in all the submenus? You could instead use copyOf and create styles much more easily. Like this, you would leave the menuStyle as is and then create these

Code: Select all

teachStyle=new copyOf(menuStyle); 
teachStyle.offbgcolor="#78AAB3"; 
teachStyle.onbgcolor="#CCCCCC";

streamStyle=new copyOf(teachStyle); 
streamStyle.offbgcolor="#8E90B7";

resourceStyle=new copyOf(teachStyle); 
resourceStyle.offbgcolor="#5D9F91";

weblogStyle=new copyOf(teachStyle); 
weblogStyle.offbgcolor="#89A58E";

liveStyle=new copyOf(teachStyle); 
liveStyle.offbgcolor="#8F9D62";

opagesStyle=new copyOf(teachStyle); 
opagesStyle.offbgcolor="#60AA89";

ositeStyle=new copyOf(teachStyle); 
ositeStyle.offbgcolor="#78AAB3";

You can see by their names in which menus they would each go. That means you'd not have to do that offbgcolor, onbgcolor, oncolor in every item in every submenu.

Ruth

[Ruth]

oops, I forgot to tell you in the other post. Because you are using offsets in your menu settings and you need to use ignoreCollisions=true; you will have to download the pre-release version 5.774 which fixes a bug in that issue with that 5.773 version.

Ruth

[posword]

Thanks, Ruth, for such a complete reply.

I will work my way through all of that, and adjust accordingly. It has turned out to be a good exercise. I like your easier way of doing menu item colors.

Cheers,
Peter

[Ruth]

You're Welcome. That copyOf method is really great if you want to create different styles which use most of the original style and just change a couple of things. Much easier than putting all that stuff in each item and in a bunch of different submenus.

Ruth

[posword]

I couldn't find a link to download the 5.774 beta.

Peter

[Ruth]

http://milonic.com/menuvinfo.php

It's right below the 5.773 It is a pre-release, meaning that it may have other fixes or new options before it gets to final.

Also, you should go here

viewtopic.php?t=3108

and mark the topic as Watch This Topic. That way you will get an email notification whenever John posts that a new release is available. That will keep you always up to date

Ruth

[posword]

Ruth, I've got myself into knots again.

I've uploaded 5.774 which just came out, and made some changes to menu_data.js. The designer wanted to go back to a single color background for the main menu and sub menus, and I've done this and tried your copyOf suggestion for the submenus, but obviously haven't got it right yet.

I've put this up on the web at http://peterwade.com/menutest2.html but no menu is displaying.

Opening the Error Console in Firefox web developer, I get an "Assignment to undeclared variable teachStyle" line 55, and a heap of warnings from milonic_src.js and an Error "s has no properties" line 16 and a heap of warnings for mmenudom.js .

Would you mind having a look?

Thanks,
Peter

[John]

You don't yet have things set up properly for using the menu in a table. See again the link Ruth gave you, and/or http://milonic.com/tablemenu.php.

Note also that if you're not going to support NS4 (don't know who is any more), you can simplify the menu calls as follows...

Code: Select all

<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="https://milonic.com/">JavaScript DHTML Menu Powered by Milonic</a></noscript>
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>

That should be the first thing after the body tag, and not placed in the table. Place the main menu code (removed from your _data file) in the td, as instructed.

[Ruth]

Hi Peter,

You do have the buildAfterLoad=true; in the data file so you can leave the placement as it is, though I was jsut about to tell you the same as John. I keep forgetting that new method, sorry.

However, you need to take a look at properties and such. You keep putting things that belong, particularly in the menu area, as if all properties should go anyplace. They do not. They have their own placement. In this case the problem is that you are putting that copyOf into the teaching submenu, it has to go after the menuStyle styling area since you are using that teachStyle for all the submenus, that is why your menu is not showing I believe. Also, you are putting separator information into the teachings submenu, and again separators are not menu properties, they are either style properties or item properties. If you go to the main site and under the DHTML Menu tab on the menu go down to the Menu Quick Reference Guide and then on that submenu you'll see style properties, menu properties, item properties among other things. Or you can use the links below my name to check and see what properties are actually menu properties.

Anyway, the problem is the result of your Teaching submenu. You should move the teachStyle up below menuStyle section and include the changed separator information

Code: Select all

teachStyle=new copyOf(menuStyle);
teachStyle.offbgcolor="#5E7CA7";
teachStyle.offcolor="#000000";
teachStyle.separatorsize=1;
teachStyle.separatorpadding=5;

and then your Teaching submenu would be

Code: Select all

with(milonic=new menuname("Teachings")){
style=teachStyle;
orientation="horizontal";
top="offset=4";
aI("text=Indexed by Author;url=/articles/index.shtml;target=_blank;");
aI("text=Indexed by Subject;url=/articles/subject.shtml;target=_blank;");
aI("text=Search Articles;url=/articles/searchpw.shtml;target=_blank;");
}

The rest of the submenus are fine.

Ruth

[posword]

Thanks, Ruth and John,

Yes, Ruth, I was confused... thanks for pointing out the obvious.

John, I've left the Netscape in because my logs show I still have some visitors using Netscape 4... though only a very small percentage of the whole.

Its working beautifully now at http://peterwade.com/menutest2.html

Thanks,
Peter

[John]

Peter,

I understand what you're saying about NS4. However, with well over 800 pages to handle here, I finally decided it just wasn't worth the effort any more to keep having to write 'special' code to satisfy very few stragglers. Haven't heard one single complaint.

Glad you finally got things working!

[Ruth]

Hi Peter,

I was with time on my hands last night so I played with your menu

Try this for your styling. Make sure you save your existing file someplace so you can go back to it. I recommend that you rename your menu_data.js file that you are going to actually use - maybe peter_data.js or posword.js. Anyway, try the following for your styles and in the main menu, add margin=1;

Code: Select all

with(menuStyle=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=2;
offborder="2px outset #caf2ff";
onborder="3px inset #fded8e";
padding=4;
fontfamily="Verdana, Helvetica, Arial";
fontsize=9.5;
fontstyle="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#557195";
offcolor="#CCCCCC";
onbgcolor="#FFFFFF";
oncolor="#DD6900";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=50);Shadow(color=#777777', Direction=135, Strength=3)";
itemheight=10;
align="center";
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=9.5;
subimage="arrow1.gif";
onsubimage="arrow2.gif";
subimagepadding=3;
menubgcolor="transparent";
}
teachStyle=new copyOf(menuStyle);
teachStyle.offbgcolor="#7398CF";
teachStyle.offcolor="#000000";
teachStyle.onbgcolor="#8AB7F8";
teachStyle.separatorsize=3;
teachStyle.separatorpadding=0;
teachStyle.bordercolor="ffffff";
teachStyle.borderstyle="solid";
teachStyle.borderwidth=4;
teachStyle.offborder="0px solid #ffffff";
teachStyle.onborder="3px inset #fded8e";

main would be

Code: Select all

with(milonic=new menuname("Main Menu")){
position="relative";
menuwidth=750;
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
margin=1;
aIshowmenu=Teachings;text=Teachings;");
aI("showmenu=StreamingAudio;text=Streaming Audio;");
aI("showmenu=Resources;text=Resources;");
aI("showmenu=Weblog;text=Weblog & Newsletter;");
aI("showmenu=PeterWade;text=Peter Wade live;");
aI("showmenu=OtherPages;text=Other Pages;");
aI("showmenu=OurSite;text=Our Site;");
aI("text=Home;url=http://peterwade.com/index.php;status=Back To Home Page;");
}

Ruth

[posword]

Thanks, Ruth. You did have fun! I'll examine it closely and learn from it.

We can marked this one as Solved.


Cheers,
Peter

[Ruth]

Hi Peter,

Here's a page with some border explanations and examples on it so you can see how to do different things.

http://support.milonic.com/beginners/borders.htm

Ruth