Windows Vista menu?

[redtopia]

Check out:

http://windowshelp.microsoft.com/Window ... fault.mspx

Can we create a menu like this?

[John]

Yes. This would be an image-based menu. Go to http://www.milonic.com/, DHTML menu/DHTML Menu Samples, and look at the examples under Image Based Samples. You can download a copy of the menu code to give it a try. If you get stuck come on back.

[redtopia]

The closest one I saw is:

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

Looks possible!

[Ruth]

Hi,

It is possible. Take a look at this one. It uses buttons with the text on them which is what the Vista Menu does. No, it doesn't look the same because it has different buttons, you'd just have to create the buttons you want. The one you posted uses background images, but the Vistas one is actually button images with text on them.

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

Ruth

[redtopia]

I realize the top level menu is easy... image based, no problem. What I was getting at is how the submenus are built, Check them out. The first level submenu is horizontal and subsequent third is vertical.

[Ruth]

Hi,

You just have to code the orientation in the menus for which way to open. Default is vertical.

main menu would be orientation="horizontal";
secondary level menus would be orientation="horizontal";
third level would be orientation="vertical"; and so on for however many levels you want and how you want them to open.

Ruth

[redtopia]

I recently saw this menu too, and I thought that it was cool, but maybe not possible with Milonic. Is this one possible?

http://www.dpreview.com/

[Ruth]

I play with different styles and that one looks like it is doable. I'll play around and get back to you

Ruth

[redtopia]

I wasn't sure how you could make a border that encompasses both the main menu and the submenus without a divider between them.

[Ruth]

Hi,

You can use images and overimages to create that, or you can use css for the borders in the main and submenu. Here is an example I created using the data file in the menu download. I removed the samples menu because that does cause a problem given it is so long. But, you can see how this was done and how it looks. I've posted the data file, and also the html page since that is where I put the css coding. Make sure that the lines don't wrap when you copy/paste the code.

Data file, save this as test_data.js.

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=150;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=-7;

with(menuStyle1=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="Arial, Helvetica, Sans-serif";
fontsize="75%";
fontstyle="normal";
offbgcolor="#ddffdd";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
padding=4;
subimage="";
subimagepadding=0;
ondecoration="underline overline";
}


with(menuStyle=new mm_style()){
offclass="brdmainnosubOff";
onclass="brdmainnosubOn";
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
padding=4;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="vertical";
style=menuStyle;
margin="5px";
aI("text=Home;url=http://www.milonic.com/;");
aI("showmenu=Milonic;text=Milonic;");
aI("showmenu=Partners;text=Partners;");
aI("showmenu=Links;text=Links;");
aI("showmenu=MyMilonic;text=My Milonic;");
}


with(milonic=new menuname("Milonic")){
style=menuStyle1;
aI("offclass=brdsubTop;onclass=brdsubTop;text=Product Purchasing Page;url=http://www.milonic.com/cbuy.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Contact Us;url=http://www.milonic.com/contactus.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Newsletter Subscription;url=http://www.milonic.com/newsletter.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Discussion Forum;url=http://www.milonic.com/forum/;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Software License Agreement;url=http://www.milonic.com/license.php;");
aI("offclass=brdsubBot;onclass=brdsubBot;text=Privacy Policy;url=http://www.milonic.com/privacy.php;");
}

with(milonic=new menuname("Partners")){
style=menuStyle1;
aI("offclass=brdsubTop;onclass=brdsubTop;text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=WebSmith;url=http://www.softidiom.com/?milonicmenu;");
aI("offclass=brdsubBot;onclass=brdsubBot;text=SMS 2 Email;url=http://www.sms2email.com/;");
}

with(milonic=new menuname("Links")){
style=menuStyle1;
aI("offclass=brdsubTop;onclass=brdsubTop;text=Apache Web Server;url=http://www.apache.org/;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=MySQL Database Server;url=http://ww.mysql.com/;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=PHP - Development;url=http://www.php.net/;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=phpBB Web Forum System;url=http://www.phpbb.net/;");
aI("offclass=brdsubBot;onclass=brdsubBot2ndLevel;showmenu=Anti Spam;text=Anti Spam Tools;");
}

with(milonic=new menuname("Anti Spam")){
style=menuStyle1;
aI("offclass=brdsubTop;onclass=brdsubTop;text=Spam Cop;url=http://www.spamcop.net/;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Mime Defang;url=http://www.mimedefang.org/;");
aI("offclass=brdsubBot;onclass=brdsubBot;text=Spam Assassin;url=http://www.spamassassin.org/;");
}

with(milonic=new menuname("MyMilonic")){
style=menuStyle1;
aI("offclass=brdsubTop;onclass=brdsubTop;text=Login;url=http://www.milonic.com/login.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Licenses;url=http://www.milonic.com/mylicenses.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Invoices;url=http://www.milonic.com/myinvoices.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=Make Support Request;url=http://www.milonic.com/reqsupport.php;");
aI("offclass=brdsubMid;onclass=brdsubMid;text=View Support Requests;url=http://www.milonic.com/mysupport.php;");
aI("offclass=brdsubBot;onclass=brdsubBot;text=Your Details;url=http://www.milonic.com/mydetails.php;");
}
drawMenus();

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Milonic DHTML/JavaScript Menu Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
BODY{
	FONT-FAMILY:verdana;
	font-size:12px;
	background-color:#FFFFFF;
}

.backG {
	FONT-FAMILY:verdana;
	background-color:#93c39b; 
	color:#ffffff; 
	border-bottom:#538c4d 2px solid;
	font-size:12px;
}	
td.form1
{
	FONT-FAMILY:verdana;
	background:#eaeaea;
	font-size:12px;
}
.brdmainnosubOff{border:0px solid #626262;text-decoration:none;}
.brdmainnosubOn{border:1px solid #626262;text-decoration:none;}
.brdmainwithsubOn{border-top:1px solid #626262;border-right:0px solid #626262;border-bottom:1px solid #626262;border-left:1px solid #626262;text-decoration:none;}
.brdsubTop{border-top:1px solid #626262;border-right:1px solid #626262;border-bottom:0px solid #626262;border-left:0px solid #626262;text-decoration:none;}
.brdsubMid{border-top:0px solid #626262;border-right:1px solid #626262;border-bottom:0px solid #626262;border-left:1px solid #626262;text-decoration:none;}
.brdsubBot{border-top:0px solid #626262;border-right:1px solid #626262;border-bottom:1px solid #626262;border-left:1px solid #626262;text-decoration:none;}
.brdsubBot2ndLevel{border-top:1px solid #626262;border-right:0px solid #626262;border-bottom:1px solid #626262;border-left:1px solid #626262;text-decoration:none;}
</style>	
</head>
<body>
<!--
	 Milonic DHTML Website Navigation Menu Version 5.0+
	 Copyright 2006 (c) Milonic Solutions Limited (UK). All Rights Reserved.
	 Please visit http://www.milonic.com/ for more information.

	 Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.		 
	 The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use. 
	 
	 Free, Commercial and Corporate Licenses are available from our website.
	 You also need to include a link back to http://www.milonic.com/ if you use the free license.
	  All Copyright notices MUST remain in place at ALL times. 
	 This includes the first three lines of this notice on every page that uses the menu.
	 If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
-->	

<!-- ***** This is the section of code you need to paste into your web pages ***** -->
<script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript" src="mmenudom.js"></script>
<noscript><a href=http://www.milonic.com/>Milonic JavaScript Menu is only visible when JavaScript is enabled</a></noscript>
<!-- The next file contains your menu data, links and menu structure etc -->
<script type="text/javascript" src="test_data.js"></script>	


</body>
</html>

Hope this gives you some idea of how to do this. As I said you can also do it with images setting them up to 'match' to give you what you want.

Ruth

[redtopia]

Yea, that works, though I had to set the _menuOpenDelay to 0 so the menu worked smoothly. Otherwise, you could see the right border line being drawn and it looked messy.

Nice work... I might have to use that one.