Mainmenu item seperation

selvan777 · Post by **selvan777** » Wed Jan 07, 2009 4:36 pm

Hi,

I have eight buttons on the main menu.

How do I make it so each is separated by 5 pixs horizontally? Do I call for the menu eight times in the page? And, if so, do I call for all the modules or do I call for eight separate data files? I would like to also have each of the eight buttons float into place randomly one after the other.

What's the best option to accomplish this?

The menu is here: http://members.lycos.co.uk/surfto/tweaks.htm#_._90

Thanks

Post by **Andy** » Fri Jan 09, 2009 4:23 pm

Have you tried using rawcss?

something like this: rawcss=0px 5px; might work

-- Andy

selvan777 · Post by **selvan777** » Fri Jan 09, 2009 5:48 pm

Hi and thanks.

I tried it here and the menu did not show:
with(StyleMain=new mm_style()){
onbgcolor="#C1D2EE";
oncolor="#000000";
offbgcolor="#EFEDDE";
offcolor="#000000";
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
separatorcolor="#EFEDDE";
separatorsize="3";
padding=3;
fontsize="75%";
fontstyle="normal";
fontweight="normal";
fontfamily="Tahoma,Helvetica,Verdana";
subimage="menu/images/ArrowDown.gif";
subimagepadding="2";
onborder="1px solid #316AC5";
offborder="1px solid #cccccc";
rawcss=0px 5px;
}

I tried it here and the menu did not show:
with(milonic=new menuname("Main Menu")){
style=StyleMain;
top=200;
screenposition="center";
alwaysvisible=1;
followscroll="1";
orientation="horizontal";
margin=4;
rawcss=0px 5px;

I tried it here and the menu showed with no change:
with(milonic=new menuname("Main Menu")){
style=StyleMain;
top=200;
screenposition="center";
alwaysvisible=1;
followscroll="1";
orientation="horizontal";
margin=4;
aI("text=Home;rawcss=0px 5px;image=menu/images/MainHome.gif;tooltip=I\\'m best viewed using an \\\"Ad-Blocker\\\" & with a screen resolution of 1400 x 1050 pixels;tipdelay=050;tipmenu=Bubbletip;url=http://lastborns.surf.to;");
aI("text=Tweaks;rawcss=0px 5px;image=menu/images/MainTweaks.gif;url=http://members.lycos.co.uk/surfto/tweak ... enu=Tweaks;");
aI("text=Surfin' Essentials;rawcss=0px 5px;image=menu/images/MainSurfin.gif;showmenu=Essentials;");
aI("text=The Best...;rawcss=0px 5px;image=menu/images/MainBest.gif;showmenu=Best;");
aI("text=Photo Albums;rawcss=0px 5px;image=menu/images/MainAlbum.gif;tipdelay=050;tipmenu=Bubbletip;showmenu=Pictures;");
aI("text=Relatives;rawcss=0px 5px;image=menu/images/MainRelatives.gif;showmenu=Relatives;");
aI("text=Credits;rawcss=0px 5px;image=menu/images/MainCredits.gif;tooltip=All thanks to those who give freely;tipdelay=050;tipmenu=Bubbletip;showmenu=Credits;");
aI("text=Mail;rawcss=0px 5px;image=menu/images/MainMail.gif;url=http://members.lycos.co.uk/surfto/fb.htm;");
}

Where exactly should I try it?

Thanks.

Post by **Andy** » Mon Jan 12, 2009 4:08 pm

There's a syntax error in your menu data.

Note that if you are declaring values for a menu or a menu style you need to enclose the value inside quotes, like this:

rawcss="0px 5px";

However, you do not need the quotes if you are declaring the value inside a menu item (aI string) because it's already inside quotes.

Also, you can declare values for either a menu style or a single menu item so it doesn;t matter where you put it as long as the syntax is correct.

rawcss="0px 5px"; for a menus style
rawcss=0px 5px; for a menu item

HTH,
Andy

selvan777 · Post by **selvan777** » Mon Jan 12, 2009 8:43 pm

Hi and thanks for the support.

I'm a bit confused so please bare with me.

In cleaning up the data file I found where the rules don't seem to apply to all entries like followscroll=, style=, borderwidth=, padding=, etc. But in playing with it all, I found changing borderwidth from 1 to -5 in the menu style "Main" gave me the separation I was looking for from the main menu to the first level sub menus after failed results from using rawcss again.

Could you please look over my data file again and let me know how I can further clean it up and then address the issue as to how I can make each button on the main menu appear floating separately? Also, when you go to The Best, Screen Saver Toggler, why does the image change on mouseover when other inages using the same menu style does not?

Thanks again for the help.

The menu is here: http://members.lycos.co.uk/surfto or http://members.lycos.co.uk/surfto/menu/menu_data.js

Post by **Ruth** » Mon Jan 12, 2009 11:52 pm

Hi,

1. I downloaded your link and I don't see any borderwidth="-5"; However, I see you put in separatorsize=5 and made the background color the same as the offbgcolor, that also will split them apart. As to the rawcss, the property that was being called in that rawcss wasn't there, i.e. rawcss="padding:0px 5px";

2. In the style area, or in the menu area excluding the style= property any property that has other than just a number takes quotes.

So, if you say borderwidth= and use only the number 1 then it is borderwidth=1; however if you decide to specify px, or em, or pts then you need quotes borderwidth="1px"; So, margin=1; but margin="1px";

3. in the items themselves you don't use quotes since they are already there. So, for example

Code: Select all

aI("text=Hello;offborder=1px solid #ffffff;url=whatever;");

Hope this helps.

Ruth

selvan777 · Post by **selvan777** » Tue Jan 13, 2009 1:50 am

Hi,

Thanks for clarifying the use of quotes, I've made notes to myself in the data file.

After applying the below from the other post, I put borderwidth back to 1.

top="offset=5";
left="offset=5";

Since that took care of properly separating the 1st level subs from the horizontal main is there still a need to use rawcss?

Post by **Ruth** » Tue Jan 13, 2009 4:23 pm

Hi,

No, it's better to use the top="offset=" to do the offset for the subs from the main horizontal menu.

Ruth

selvan777 · Post by **selvan777** » Tue Jan 13, 2009 5:14 pm

Hi,

Yes, that's what I meant. I put borderwidth back to it's original value of 1 and used the top="offset=".
http://members.lycos.co.uk/surfto/menu/menu_data.js

I'm not sure why the borderwidth changing from 1 to -5 did it for me but the important thing is that I've now learned the proper way of offsetting a vertical menu coming off a horizontal menu.

Since _subOffsetTop=5 is a sort of global entry for all subs off of a vertical, is there such an entry for all subs off a horizontal?

Thanks.

Post by **Ruth** » Tue Jan 13, 2009 6:29 pm

No, there isn't. I'm not into programming, but I think it never got created because it would take so much programming and also increase the size of the program when it was possible to use the already existing top=/left="offset properties to do what was necessary. I know one of the considerations is trying to keep the menu program size as small as possible while including so many options for design and functionality.

Ruth

selvan777 · Post by **selvan777** » Tue Jan 13, 2009 7:06 pm

Sounds like a good game plan to me! After all, it's all about speed...

What about making each button on the main horizontal menu appear floating separately like as if there were 8?

Also, when you go to my page and mouse over to "The Best, Screen Saver Toggler", why does the pop image change on mouseover when other pop images using the same menu style at "Photo Albums" do not?

The menu is at http://members.lycos.co.uk/surfto/

Thanks.

Post by **Ruth** » Wed Jan 14, 2009 4:28 am

Hi,

The problem with that image is that it has transparency so when you mouseover the onbgcolor is showing in the transparent areas. To fix that, go to that menu and it should look like this

Code: Select all

with(milonic=new menuname("SST")){
style=StylePopImage;
margin=2;
aI("image=SubSST.gif;onbgcolor=#DFDFFF;url=ScreenSaverToggler.exe;");
}

all you did was make it so that on mouseover the bgcolor stays the same as it was in the offbgcolor mode.

As to the other about separate floating items. I'm not sure what you mean. Do you want each item to be it's own menu? You can do that, you can set it as popups, but that would mean changing your format and creating say a table with the requisite number of cells i.e. 8 separated as you want them, and then you'd put each image in each table cell and then use the popup menu setup instead of having a main menu like you have with all the colors and such. There is a sample here http://milonic.com/menusample24.php It allows you to set a 'popup' call for a submenu from an image. The top green 'text' names Milonic, Partners etc, there are transparent images next to each name and the submenus are called to show up below the text. In the middle of the page is an actual Milonic logo and a submenu shows when you mouseover it. That's the only way I know to do what you want, unless I am not understanding what you're asking.

Ruth

selvan777 · Post by **selvan777** » Wed Jan 14, 2009 9:52 am

Hi,

Thanks again. I removed the transparency instead of adding onbgcolor.

That sample you linked to is what I'm talking about but changing my format and doing all that is a bit much so I did some playing around with the data file and was able to get the horizontal main menu items separated but I can't figure out how to center them as a whole using something like screenposition="center" rather than, say, left=200.

1. I'd like to have the 1st item (Home) center itself and then have the 2nd item (Tweaks) offset itself by 5px and then have the 2 items center themselves and then have the 3rd item offset itself by 5px and then have the 3 items center themselves and so on and so on.

2. How do I delay the 2nd item from appearing by 1sec after the 1st, and then the 3rd by 1sec after the 2nd, etc?

3. how do I make each come into place using different effects like fade-in, or float from the right or left, or bottom or top, etc?

A sort of animated assembly of the menu with variables for speed and effects.

I'll keep playing with it to see if I can figure it out....if it's even possible!

test page:
http://members.lycos.co.uk/surfto/test/fb.htm#_scroll

original page:
http://members.lycos.co.uk/surfto/fb.htm

Post by **Ruth** » Wed Jan 14, 2009 7:06 pm

Hi,

I can figure out the 1st item with a little playing around, but it's not possible to do the others. With 2 and 3 you are trying to treat each item as if it is a separate menu and they are not, they are only separate items. The things like fade in and such are Microsoft Transitions and Filters, they only work in Internet explorer [though I think you can get some things applied for other browsers using some kinds of js functions] however you can't get them to apply to each item, those MS Filters and transitions, or if you found some js function that would work for other browsers for some effects would apply to the menu not the things inside it.

Ruth

selvan777 · Post by **selvan777** » Wed Jan 14, 2009 7:43 pm

When you said you could figure out the 1st item are you referring to centering? Regarding centering, never mind the delays and transitions, my problem is that if I use screenposition="center" for each, they end up like a pyramid stacked up on each other, understandably so. And if I use left=x like I am, it will be dependent on the viewers screen resolution causing it to not be truly centered. So I'm hoping to be able to screenposition="center" the 1st horizontal menu and use offsets off that 1st for the remaining horizontal menus.

It's probably my lack of understanding but I thought with the way I have the data now, they are separate menus using the the same menu style. If not, perhaps I should write the data so they are separate menu's enabling a more feature rich menu?

Those effects, I was actually only referring to the 8 main menu's (or items?) and not what's in them (as in 'XP Pro Tweaks', Firefox v3 Tweaks', etc). None the less, I guess it would take third party js usage.

Thanks

Post by **Ruth** » Wed Jan 14, 2009 10:39 pm

Hi,

What I see when I go to the two pages are two totally differen things. What I need is for you to give me the page on which you want the menu so I have the final layout where the menu is going to be, and then tell me which menu [I am assuming that what you want is the latest one, the one where the items are apart, I note you have them set as each item is its own menu, which is fine] Anyway, it would do no good to work on that test page set up and fix it how you like it and then have you move it and it not look right because the final page is a different layout. So, if you can give me the actual layout where it will appear, I think I can actually set it up how you want it, even with all the fancy transitions and such

I have the menu files, and that data file from that test/ scroll page so I only need what the layout will be where you want it to appear. So, is that test page, the first link to the #scroll thing the correct layout? If so, I'll work on that

Ruth

selvan777 · Post by **selvan777** » Thu Jan 15, 2009 12:50 am

Hi Ruth,

Thanks, that's great.

Please work on this one below where the page has a date and time stamp of 1/14/2009 2:56 PM
Take the test.htm out and you'll have the menu directory for the data file.
http://members.lycos.co.uk/surfto/test/test.htm

I plan on using the menu at my web page(s):
http://members.lycos.co.uk/surfto/index.html
http://members.lycos.co.uk/surfto/tweaks.htm
http://members.lycos.co.uk/surfto/fb.htm
http://members.lycos.co.uk/surfto/fb_error.htm

Thanks

Post by **Ruth** » Thu Jan 15, 2009 4:21 am

Hi,

OK, this is long, but I put everything into a zip file. When you get it just upload the page to the same place you have the test page, and upload the files to the same place you have the menu files. The test page I created has a call for the correct menu files in the right places. In order to do this I created 9 separate main data files and a subs data file. The calls for the program files and the subs_data.js file are the first thing after the body tag, the calls for each main file, named home_data.js, tweaks_data.js and so on, are in the table. The table consists of 9 cells, one data file to each cell, it is then surrounded by a wider table, this is necessary to allow the scrolling div to correctly center the menus.

http://support.milonic.com/ruth/selvan.zip

The only way I could get it to do what you want, which is to have it do the fancy things like slide and such and to also scroll and position as you wanted was to make the main menus relative positioned in a table. Then in order for them to scroll since relatively positioned menus won't scroll on their own was to place them into a scrolling/floating layer so that the layer scrolls. Now, it is set at the bottom of the page since that seemed to work best because of the ads at the top. However, if you want it at the top you can do that, but there is a caveat. Unlike the full menu that scrolls which you can position say at top=200; and it starts at 200px down when the page is loaded but ends up right at the top of the page as you start to scroll, the scrolling/floating layer won't do that. You can only set its position and when you scroll it will always be that many pixels from the top of the page. That's why I put it at the bottom, but if you want it at the top, then open the page and find in the head section the script function for that floating/scrolling div from EchoEcho.com --(its just above the <!--[if gte mso 10])-- and change the floatY=30; to floatY=200; and right below that find the valign="bottom"; and change it to valign="top";.

Anyway, you should be able to figure it out from what I put in the file, it has the page and all the data files, and since I used your page and just did a copy paste then all the links are correct, like the one on the test page.

Ruth

selvan777 · Post by **selvan777** » Thu Jan 15, 2009 7:10 am

Thanks Ruth.

It will take some time for me to play with all this now but I'll be sure to return with questions.

Thanks again.

Selvan

selvan777 · Post by **selvan777** » Thu Jan 15, 2009 3:39 pm

Hi,

I've got the page uploaded to http://members.lycos.co.uk/surfto/test/ ... scroll.htm

In IE there is a larger gap between "Tweaks and Surfin" and "Credits and Mail" as compared to the others.
In FF all the gaps are ignored and the menu is left positioned.

Having it stuck at 200/xxx pixs down would not look right on tweaks.htm so using this method I want to leave it at the bottom. That said, could you please make it so the subs open upward rather than down? Also, does it have to be an absolute bottom or can it be like5 pixs up from the bottom?

Could you tell me what all this is below </html> ?

Thanks

</html>

</pre></xmp></noscript>

<script language="javascript" src="http://ads.tripod.lycos.co.uk/ad/popund ... "></script>



<script language="JavaScript" type="text/javascript"></script>
<noscript>
<img src="//secure-uk.imrworldwide.com/cgi-bin/m?ci=lycos-uk&cg=0" alt="">
</noscript>

Milonic JavaScript Menu

Mainmenu item seperation

Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation

Re: Mainmenu item seperation