Upgrading blues

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:24

Upgrading blues

Poster: TheMike
Dated: Tuesday November 22 2005 - 10:07:54 GMT

I just purchased a new license for version 5 of the menu.

I converted the menu v3 to v5 with the Milonic tool.
If I checkout my pages the sub menus aren't placed properly!

New style (version 5)
http://www.dreamwareit.com/

I like the new menu to be like this:
Old style (version 3)
http://www.dreamwareit.com/category.php?catID=8

fyi:
I've put the menu in an absolutely defined <div></div> statement!

I think my problem has to do with the div but i can't figure out what!

Does anyone have a hint?

Poster: Ruth
Dated: Tuesday November 22 2005 - 11:33:42 GMT

Hi

Nice job on the conversion.

There's no reason for you to put the menu in a div which does cause problems. You can position the menu absolutely using the top=and left= properties.

Code:

with(milonic=new menuname("mainmenu")){
left=331;
top=152;
itemheight=16;

That will put it where it is now and no problems with the submenu position. I tested it in IE at 800x600 and 1024x768 it didn't seem to move.

A couple of things with regard the conversion:

1. after the showmenu=whatevermenu;; note the double ;; eliminate one.

2. aligment="left"; should be align=left; I think the conversion tool does that.

3. the effect that comes up at the top, there is now a property for that which you can set in the style section;

Code:

overfilter="Alpha(style=0, opacity=70)";

If you want to see other effects you can apply go to Filters and Transitions Demo This is an interactive demo so you can choose different filters and transitions, see how they look and the full code will be put into a textarea for copying. There is also an outfilter property.

I know this menu is so totally different from 3 and there are a lot of things to find out. Below my name are links to some helpful things. The beginners' forum part has a few things, pretty quick reads. The properties links will tell you about all the available properties you can apply, and the table menu is one that causes many problems.

I noticed in your submenus you have a number of non breaking line spaces to shift the text. You could code a transparent image in those the width you want and then all would be the same indentation; image=trans.gif; you could also apply css styles so you could create a class set for indent.

Code:

.subindent {text-indent: 5em }

or whatever indent you want. You'd put that in your style sheet and then in the item where you wanted the indent to apply you'd code this offclass=subindent;onclass=subindent; You need the off and on so that the text is in the same position for the mouseOff and mouseOn state.

One last thing, and you don't have to do it this way, but I thought I'd mention it so you know. You could create a second style using the copyOf method and in that style you'd only put the things that are different from the style1. So, in your main menu you have images, bgimages, overimages and overbgimages coded because they don't apply to the subs. Instead you could do this

Code:

mainStyle=new copyOf(style1); 
mainStyle.image="mm_arrow.gif"; 
mainStyle.overimage="mo_arrow.gif"; 
mainStyle.bgimage="mm_blank_top.gif"; 
mainStyle.overbgimage="mo_blank_top.gif"; 

You would then put the style in the main menu as style=mainStyle; and not have to code each aI string with the image=; overimage= bgimage= and overbgimage= because having them in the style would apply them to all items in any menu that used that style.

Wow, kind of long-winded here. Sorry 'bout that.

Welcome back

Ruth

Poster: TheMike
Dated: Tuesday November 22 2005 - 13:49:19 GMT

Thank you very much for your lenghty explanation! As a restarter it is more than welcome!

Ruth wrote:

I noticed in your submenus you have a number of non breaking line spaces to shift the text. You could code a transparent image in those the width you want and then all would be the same indentation; image=trans.gif; you could also apply css styles so you could create a class set for indent.

Code:

.subindent {text-indent: 5em }

I implemented most of your suggestions and something strange is happening.
http://www.dreamwareit.com
Check out the Company submenu! (Unique Selling Points)
An item with a submenu aligns different???

I found this is only a problem with IE6 and not Firefox 1.07?

Do you have an explanation for that?

Another question is How can I connect this USP submenu to the company submenu, now there is a small gap in between?

Ruth wrote:

One last thing, and you don't have to do it this way, but I thought I'd mention it so you know. You could create a second style using the copyOf method and in that style you'd only put the things that are different from the style1. So, in your main menu you have images, bgimages, overimages and overbgimages coded because they don't apply to the subs. Instead you could do this

mainStyle=new copyOf(style1);
mainStyle.image="mm_arrow.gif";
mainStyle.overimage="mo_arrow.gif";
mainStyle.bgimage="mm_blank_top.gif";
mainStyle.overbgimage="mo_blank_top.gif";

You would then put the style in the main menu as style=mainStyle; and not have to code each aI string with the image=; overimage= bgimage= and overbgimage= because having them in the style would apply them to all items in any menu that used that style.

I also tried to implement your last suggestion, but I think I made a syntax error or something because nothing is displayed. I show you the relevant section from my menu definition file:

Code:

with(style1=new mm_style()){
overfilter="Alpha(style=0,opacity=75)";
offcolor="#ffffff";
offbgcolor="#000000";
oncolor="#ffffff";
onbgcolor="#392100";
fontsize=10;
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana, Arial";
padding=2;
high3dcolor="#66ffff";
low3dcolor="#000099";
pagebgcolor="#392100";
headercolor="#ffffff";
separatorcolor="#ff0000";
}

mainStyle=new copyOf(style1);
mainStyle.image="/images/nav/mm_arrow.gif";
mainStyle.overimage="/images/nav/mo_arrow.gif";
mainStyle.bgimage="/images/nav/mm_blank_top.gif";
mainStyle.overbgimage="/images/nav/mo_blank_top.gif";

(milonic=new menuname("mainmenu")){
width=105;
left=331;
top=152;
itemheight=16;
style=mainStyle;
alwaysvisible=1;
align="left";
orientation="horizontal";
aI("text=Company;showmenu=company;")
aI("text=Products;showmenu=products;")
aI("text=History;showmenu=history;")
aI("text=Contact;showmenu=contact;")
}

Another pointer is greatly appreciated!

PS How can I make a comment in a menu file?

Poster: Ruth
Dated: Tuesday November 22 2005 - 14:57:41 GMT

Hi,

I remember now you mention it about the indent problem when there's a submenu. Unfortunately, I think because it doesn't occur across all browsers the only solution is to create a transparent image that is 5em in size, and in those items that have submenus use the transparent image instead. I don't use em much, but you could try setting it to 7px on the indent and then do another class with 8px and call the second class in that item and see what happens in FF?

As to the copy of the syntax is fine for what you have, but I'll bet the path is wrong, try removing the leading /

To make a 'comment' you need to put // in front of each line that is your 'comment'

I know I've seen the usual <!-- but since I use IE I have no idea if that is causing problems in other browsers or if it was useable like that because of how the menus were being generated, maybe in php or asp from mysql or some other way beyond me thing that is being used now to generate things on the web....

Hope this helps. You will be amazed at the things you can do when you start experimenting. There is a treemenu, opens down but also a little indented to the right, and a collapsible menu that opens each sub straight down shifting the main items below it. There is a frames version, the ability to use tab access, and also a listbased menu which actually styles just like any menu you style but is built from a ul list which makes it very search engine friendly. You can even use multiple lists though that is just out and the demo is not ready for it yet.

There are a lot of modules you can add to do specific things

http://www.milonic.com/menumodules.php

There are demos of most of them http://support.milonic.com/demos/ they are at the bottom of that page under the Milonic Bolt-on Modules, the top part, except for the IE interactive Filters demo are specialized functions written by Kevin for things users wanted.

There are also some help sections on the main site, under the Support of the main menu: a Beginners Manual and then down you'll see Tech Documents which are really the demos, a borders and a css demo.

That will give you a start

Ruth

Industrial Strength JavaScript and DHTML Menus

Upgrading blues