Can Milonic menus do something like this site?

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

Can Milonic menus do something like this site?

Poster: wpatters1229
Dated: Thursday February 2 2006 - 16:31:53 GMT

http://www.californiamoves.com/

Has a javascript menu system on the right side that is very much like milonic. Not being a javascipt programmer I can only guess that this might be possible. It looks like the text area of the script goes up into a area that is not on the button. The button has pregraphical text on it and when you mouse over the text for the button shows up above the menu items.
Can Milonic be tweaked to do this? I know enough about the code to be dangerous but no way a javascript programmer.

Cheers

Poster: Ruth
Dated: Friday February 3 2006 - 15:58:39 GMT

Hi,

Yes, you can do that with Milonic. How you do it would depend on what it is you need and your layout.

For example, if the main menu items are links and no submenus then you could do it by making a 'submenu' which is just the text you want and set the top and left offsets so it opens at the point you want.

You can use a popup menu which calls a submenu that has the text you want, and have the submenus open in a fixed position based on an image. Again, that is only if you do not need submenus for the item.

If the main menu items must have submenus and/or submenus and links, then you could do it by setting up divs and using a show/hide function that is called from each menu item to show the correct div for that item. All the divs are absolutely positioned in the same place so the function opens them all in the same area.

I've moved this back to the help support for version 5 forum. Just post back if you need help with setting this up.

Ruth

That makes sense !

Poster: wpatters1229
Dated: Friday February 3 2006 - 17:42:03 GMT

That makes perfect sense since they are absolute positioning I can have a submenu call in the mouseover and have the submenu show up anywhere...I do that all the time but position it in relation to the master menu item. I just saw this in another site and thought it was a nice effect to just present what that menu item was about by placing the text above the menu area. Different presentation idea.
Not being a javascript programmer I know about using divs to turn things off and on in layers but not sure exactly how to write it. I'm one of those guys who sees the example and then tweaks it to fit my layout.

Again thanks

Poster: Ruth
Dated: Friday February 3 2006 - 20:38:50 GMT

Hi,

Actually, you could also use tooltips, which I forgot to mention :oops:

They have been developed more, for example, you can get them to show up in a bubble. TOOLTIPS This requires the version 5.742 I think and the newest tootlips which is on the bolt-on modules page.

If you don't want that and want to have the capability to have a link and a submenu in an item, then I suggest the divs and calling the function in the item.

Ruth

Great stuff...but

Poster: wpatters1229
Dated: Friday February 3 2006 - 22:16:45 GMT

Some of them have examples associated with them. Is there any of the menus that incorporate these plug ins so we can see how they actually look and feel? I know that when they are free it is tough to ask for even more time.

Thanks again for the tip

Poster: Ruth
Dated: Friday February 3 2006 - 22:41:31 GMT

I'm not sure what you mean about examples. For which ones do you want an example?

The popup positioned by images is http://www.milonic.com/menusample24.php

I gave the page for the tooltips.

This is the sample for setting offsets. It has other things in it, but you can set offsets. This is for the main menu, but you'd do the same setup for the submenus. However, remember tha tthe offsets when used for a submenu are offset from the parent item, rather than from the page. so you'd have to figure the offsets for each menu item that had this submenu with text you wanted to have show on mouseover.

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

I can set something up for doing the divs if that is what you wanted to see?

Ruth

examples

Poster: wpatters1229
Dated: Friday February 3 2006 - 22:50:53 GMT

I was just meaning for each of the plugins on the extra suff you sent me to in that link. Some great addons but some of them would be nice to see in a menu example...that was all.

Thanks again

Poster: Ruth
Dated: Friday February 3 2006 - 23:31:36 GMT

Hi,

You must mean the tooltips. Many of the things on site are being upgraded, the actual tooltips sample isn't completed yet so you'd have to actually use the page to which I sent you for the setup. If you view the source I believe it shows how each thing is done, and the menu used for that is actually scripted on the page.

Make this into tips_data.js just so you don't overwrite the menu_data.js file. Then you can make a blank page and just call the menu files and substitute the tips_data.js for the menu_data.js

Code:

with(tipSampStyle=new mm_style()){
   bordercolor="#666666";
   borderstyle="solid";
   borderwidth=1;
   fontfamily="comic sans ms,verdana,helvetica";
   fontsize="12px";
   fontstyle="normal";
   fontweight="normal";
   offbgcolor="#ffffff";
   offcolor="#666666";
   onbgcolor="#ff9933";
   separatorsize=1
   oncolor="#000000";
   padding=3;
   subimage="/images/arrow.gif"
}
   
   

with(bubbleTipStyle=new mm_style()){
   offcolor = "#000000";
   fontsize = "10px";
   fontstyle = "normal";
   fontfamily = "tahoma, verdana"; 
   overfilter = "Fade(duration=0.2);"
}
with(new menuname("bubbleTip"))
{
   top="offset=-176"
   left="offset=5"
   style=bubbleTipStyle;
   orientation="horizontal"
   menuwidth=225
   menuheight=166
   if(_W.M_maxTipWidth)maxwidth=M_maxTipWidth
   aI("text=;type=ToolTip;align=center;valign=middle;padding=0px 10px 30px 15px;itemwidth=220;bgimage=/menuimages/oval_bubble.gif");
}
   



with(speechbubbleTipStyle=new mm_style()){
   offcolor = "#000000";
   fontsize = "10px";
   fontstyle = "normal";
   fontfamily = "tahoma, verdana"; 
   overfilter = "Fade(duration=0.2);"
}
with(new menuname("speechbubbleTip"))
{
   top="offset=-176"
   left="offset=-92"
   style=speechbubbleTipStyle;
   orientation="horizontal"
   menuwidth=347
   menuheight=164
   if(_W.M_maxTipWidth)maxwidth=M_maxTipWidth
   aI("text=;type=ToolTip;align=center;valign=middle;padding=0px 10px 30px 15px;itemwidth=347;bgimage=/menuimages/oval_speech.gif");
}
   


with(milonic=new menuname("ToolTips menu")){
   alwaysvisible=1;
   style=tipSampStyle;
   top=10;
   left=200
   position="relative"
   aI("status=Back To Home Page;text=Home;url=http://www.milonic.com/;tooltip=Clicking here will take you back to the home page of Milonic");
   aI("text=ToolTip Sample;tooltip=Hello, I\\'m a Sample ToolTip");
   aI("text=ToolTip Sample 100 Millisecond Delay;tooltip=I\\'m a Sample ToolTip with a 100 Millisecond Delay;tipdelay=100;");
   aI("text=ToolTip Sample 200 Millisecond Delay and I move with the mouse;tooltip=I\\'m a Sample ToolTip with a 200 Millisecond Delay and I move with the mouse;tipdelay=200;tipfollow=1;");
   aI("text=ToolTip Sample 1 Second Delay;tooltip=I\\'m a Sample ToolTip with a 1 Second Delay;tipdelay=1000");
   aI("valign=top;text=ToolTip Sample With Images inside;tooltip=<img src=/images/miloniclogo_80x30.gif> I\\'m a Sample ToolTip with a Images inside<br>You can add any <b>HTML</b> to your ToolTip text");
   aI("text=Including 'Single' and &quot;Double&quot; Quotes inside Tooltips;tooltip=Single Quotes: \\'Inside\\' - Double Quotes &quot;Inside&quot;;");
   aI("text=Difference Tooltip Styles using Bubbles;tooltip=I\\'m a Sample ToolTip viewable inside a Bubble Image;tipmenu=bubbleTip");
   aI("text=Difference Tooltip Styles using Bubbles, that moves with the mouse;tooltip=I\\'m a Sample ToolTip viewable inside a Bubble Image, that moves with the mouse;tipmenu=bubbleTip;tipfollow=1");
}

drawMenus()

Also, make sure you download the newest tooltips module and the newest menu version. http://www.milonic.com/menumodules.php Tooltips is on this page.

Ruth

Industrial Strength JavaScript and DHTML Menus

Can Milonic menus do something like this site?

That makes sense !

Great stuff...but

examples