menu style like used on dpreview.com

[blaine]

Is it possible to create the same menu look and effect as that shown on dpreview.com

It's more the submenu look and effect that I've not seen in any Milonic examples. Normally I see the submenu is positioned to the right and lower. It may be that all that is required is to use the same color for the hover over menuitem color as the background color of the submenu.

[Ruth]

Yes, you could design a menu like that and have it function like that. The menu would have the same offbgcolor and onbgcolor, no borders, no separators and the oncolor would be white, while offcolor is silver. Then on the page you'd do your layout so that you have that menu background in the table cell at that side. The table would need to be left aligned to keep that image in the same place, then you'd code the menu to top=; left=; and put in the correct placement to put it in the correct place.

Another option I'm playing with now, using the background as part of the menu/menu items.

Ruth

[blaine]

Thanks Ruth,

I thought it was a clean looking layout and its quite quite fast as well. It appears to be a custom set of JS scripts that Phil of dpreview.com wrote himself - talented guy

I was pretty sure the Milonic can mimic the look and feel

[Ruth]

Here's a test setup for you to try, of course you'll have to get whatever image your going to put in the menu table cell:

Code: Select all

<table border="0" width="100%" height="500" bgcolor="#333333">
<tr>
       <td height="120" colspan="2">a</td>
      
</tr>
<tr>
       <td width="128" valign="top"><img src="whatever_image_youput.gif" width="128" height="304" border="0">a</td>
       <td>b</td>
</tr>
</table>

This is from the download file for the milonic menu, I didn't do anything with submenus, just for the main menu, make the style code so it looks like that page. You can use whatever colors you want, of course, but this is set up with the colors from that page.

Code: Select all

with(menuStyle=new mm_style()){
onbgcolor="#333333";
oncolor="#ffffff";
offbgcolor="#333333";
offcolor="#E5E5E5";
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
separatorcolor="#2D729D";
separatorsize=0;
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}


with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=145;
left=20;
alwaysvisible=1;
itemwidth=120;
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=MyMilonic;");
}

It's a real simple menu.

Ruth

[blaine]

Thanks Ruth,

That helped and I was able to take it and make some final tweaks to get the effect as well as the submenu.

The only thing I could not duplicate was the way the black 1px border appears around the current menu position and integrates the submenu border as well if the item has a submenu. I don't think there is a way to do that.

It's not really a necessary to have that border but you know sometimes you just have to take up the challenge.

[Ruth]

I have clicked every link on that dpreview and I get no black border around any item, nor extending around any submenu if an item has one. Actually, I'm not visualizing how any kind of black border would show if you had it since the color of the menu is in the black family [real dark] to start. What is it you want to happen, I'd bet there's a way to get it or something pretty close.

Ruth

[Andy]

Hi,

Just thought I'd show you something I've been working on.

It's still Beta and needs the pre release version from http://milonic.com/menuvinfo.php but is coming along though.

http://milonic.com/tab1.html

Hope this helps,
Andy

[blaine]

Hi Andy, Ruth:

Andy, that tab'ed example is in showing the same border effect that I saw with the dpreview menu.

Ruth I was going to annotate a screen shot to point it out - do you see the same now with the border on the dpreview site?

Andy, did you need to use the 5.7 release to get this effect?

[Ruth]

Hi Blaine,
Yes you need the pre-release 5.7. And, the tabbed menu is still beta, still being developed.

I still get no border around any item no matter what. I tried in IE5.5 and Netscape7.1, Opera7.11. One thing you could do though it wouldn't give you that layout of the tabbed menu, you could use the pageborder parameter. That will set the pageborder to whatever width, style and color you make it and it would show on each menu item in the current page state. So let's say you go to cameras on the main menu and camera1 on the submenu, if you set the pageborder parameter when you're on that camera1 page the border would show on the main menu camera and on the submenu camera1 items.

Ruth

[John]

Looks good, boss.