menu style like used on dpreview.com

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

menu style like used on dpreview.com

Poster: blaine
Dated: Monday January 31 2005 - 1:24:52 GMT

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.

Poster: Ruth
Dated: Monday January 31 2005 - 2:37:47 GMT

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

Poster: blaine
Dated: Monday January 31 2005 - 2:44:12 GMT

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

Poster: Ruth
Dated: Monday January 31 2005 - 3:32:06 GMT

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:

<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:

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://www.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

Poster: blaine
Dated: Tuesday February 1 2005 - 4:00:00 GMT

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.

Poster: Ruth
Dated: Tuesday February 1 2005 - 4:20:49 GMT

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

Poster: Andy
Dated: Tuesday February 1 2005 - 6:44:12 GMT

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://www.milonic.com/menuvinfo.php but is coming along though.

http://www.milonic.com/tab1.html

Hope this helps,
Andy

Poster: blaine
Dated: Tuesday February 1 2005 - 13:51:43 GMT

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?

Poster: Ruth
Dated: Tuesday February 1 2005 - 19:35:15 GMT

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

Poster: John
Dated: Wednesday February 2 2005 - 0:20:46 GMT

Looks good, boss.

Industrial Strength JavaScript and DHTML Menus

menu style like used on dpreview.com