Is it possible to create a menu that looks like this?

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

Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Monday January 7 2008 - 17:14:51 GMT

Is it possible to create a menu system like this with Milonic? I'm not sure where to even begin to do this since it is fixed height but the individual items fit within the overall height

Secondly, the "Why Develop with us link" would actually be its only pop-out menu but would pop down instead of to the left or right. Is that possible as well? :oops:

Thanks!

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Wednesday January 9 2008 - 18:31:17 GMT

Can anyone determine if this possible?????

Thanks!

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Thursday January 10 2008 - 14:35:56 GMT

Hi,

That should be possible. You can set the one you want to be the 'pop out' to be at the bottom by setting the offsets of that submenu. I have to say that it would be best if that Why Develop with Us item was an image, that would give you a fixed width and height to set in the submenu and make the offsets easier to set. However, I am just postulating since I don't have a page with a menu to play

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Thursday January 10 2008 - 18:58:12 GMT

Hi Ruth,

Thanks for the reply.

okay so I'd make the "why develop a grpahic" then I could pop that menu straight down?

Secondly... how do I create the top portion? I want to have all the menu items fit within a specific height. In the Milonic styles I see menu height but that forces the menu items to spread out in height.

http://clients2.serverside.net/serverside/

This is what I have started. It obviously isn't far along but I'm sort of stuck on how to get this to look correct.

Thanks!

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Thursday January 10 2008 - 21:02:01 GMT

Hi,

Can you tell me where the menu goes, the height of it and the width? I see a flash thingee at the top right where the screenshot shows the menu?

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Thursday January 10 2008 - 21:11:13 GMT

sorry I'm working on the templates right now... my apologies

Try this one:
http://clients2.serverside.net/serversi ... on=content

Menu is setup along the top with the subs but as you can see I'm having problems getting it to look right.

Height of each submenu is 210px and the width is 237px

Thank you for your assistance!

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Thursday January 10 2008 - 22:46:27 GMT

Hi,

1st, there is a difference in height in this section between IE and FF though my FF is an older version 1.5. Just so you know

Code:

<DIV id=interiorContentBlock>
<DIV id=interiorTitleBlock 
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #bcbcbc 1px solid">
<H1 id=pageTitle>Managed Hosting &amp; Web Development</H1></DIV>
<P>Sed ut perspiciatis  and so on ..............</P></DIV>

It seems to have to do with the H1 title. IE is making that content block longer. If I remove that title then that block is the same in IE and FF. One day I might actually get around to installing the new FF :oops:

OK, this is what I did. You'll have to play and get whatever you want but this should give you some direction.

1. make an invisible gif 10x10px, you'll need it for what is being done and posting it here it doesn't show

It is used to add an item that is set at 50px to force the Why Develop item to the bottom of the submenu. Also, note in that bottom item that it is set with offbg and onbgcolors. That is to make sure that that item looks the same in the two browsers I tested, there is sometimes a difference in padding, no matter what is done between IE and FF in the items, so by coloring the bg in that item the same as the image color they look the same in both.

2. here's the Why image I made.

3. This is the new MenuDevelopment submenu

Code:

with(milonic=new menuname("MenuDevelopment")){
style=menuStyleDevelopment;
menuwidth="237px";
menuheight="210px";
itemheight="18px;"
aI("text=Login;url=http://www.milonic.com/login.php;");
aI("text=Licenses;url=http://www.milonic.com/mylicenses.php;");
aI("text=Invoices;url=http://www.milonic.com/myinvoices.php;");
aI("text=Make Support Request;url=http://www.milonic.com/reqsupport.php;");
aI("text=View Support Requests;url=http://www.milonic.com/mysupport.php;");
aI("text=Your Details;url=http://www.milonic.com/mydetails.php;");
aI("image=spacer.gif;imageheight=50;type=disabled;");
aI("image=btn_whydev_off.gif;itemheight=32;padding=0;showmenu=WhyDevelop;offbgcolor=#749452;onbgcolor=#749452;");
}

4. This is the WhyDevelop submenu I created

Code:

with(milonic=new menuname("WhyDevelop")){
style=menuStyleDevelopment;
top="offset=31";
left="offset=-235";
menuwidth="237px";
menuheight="160px";
rawcss="padding:0px 10px 0px 10px";
aI("text=ServerSide offers a wide range of dynamic software development solutions, from e-commerce, database, and messaging / collaboration to a large scale web solutions and highly custom application.<br><br>Our planning, development, and delivery methodologies exceed industry standards, ensuring each client a practical and superior product. A partial list of the applicands we have delivered includes:;rawcss=padding:0px 10px 0px 10px;");
}

Hope this helps. At the least, it will give you some ideas.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Thursday January 10 2008 - 22:52:24 GMT

Hi Ruth,

Wow okay good ideas. I think I've gotten the Why Host part to work (at least partially). I fool around with this more tonight.

Thank you SO MUCH for your help today. I'll reply if I get stuck again. This is way more formatting than I usually do but we are trying to really show off the capabilities of the menu system for our site.

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Thursday January 10 2008 - 23:30:07 GMT

Hi,

Looks nice. Just a note, on that Why host submenu you have the Learn More as a link so, since you're doing it that way, don't forget you should make that item as type=html; It seems to work fine without that in IE and FF, but not sure on all browsers.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Friday January 11 2008 - 14:49:28 GMT

Ruth,

okay I've got everything setup on that page however, on this page

http://clients2.serverside.net/serverside/

How do I keep the submenus turned on and in place when the page loads? Do I use 'alwaysvisible'?

UPDATE: okay I used alwaysvisible but all of my submenus stack on top of eachother

Take a look now

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 15:12:56 GMT

Hi,

If you are looking to have specific submenus open on their 'matching' pages you probably need the openmenusbyurl.js module. It is in the menu download, or you can get it at http://www.milonic.com/openmenusbyurl.js

Here is a demo http://support.milonic.com/demos/openme ... /index.htm

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Friday January 11 2008 - 15:18:38 GMT

No I just want to foce the sub menus to open on the home page. It is part of the design.

If you pull up the home page now you can see what I'm trying to do ... all the menus are stacked up until you rollover each image. Once you do that, that is how I want the menu to look.

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 15:20:20 GMT

That might not help you. What exactly are you trying to do? It looks as if you want 3 separate main menus right next to each other.

Managed Hosting ...................Development ...................Client Portal
Plus the things ......................Plus the things..................Plus the stuff
below this one ......................Below Develop...................Below Client
Why Host ----------------------------Why Develop -------------------Why be Client

And then the why host, develop, client would be the item that opens a submenu???

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 15:23:01 GMT

OK, I got it. Let me work on it and I'll post back.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Friday January 11 2008 - 15:27:08 GMT

Ruth wrote:

That might not help you. What exactly are you trying to do? It looks as if you want 3 separate main menus right next to each other.

Managed Hosting ...................Development ...................Client Portal
Plus the things ......................Plus the things..................Plus the stuff
below this one ......................Below Develop...................Below Client
Why Host ----------------------------Why Develop -------------------Why be Client

And then the why host, develop, client would be the item that opens a submenu???

Ruth

Yes that is EXACTLY what I want to do.. the 'why' buttons would then be submenus that open on rollover. Thanks!

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 16:18:01 GMT

Hi,

I'm working on this. What you do need is openmenusbyurl.js I think, but I can only get it to open one of the submenus. I'm in contact with Milonic to find out how to get it to open all three on that page.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Friday January 11 2008 - 16:19:51 GMT

Thanks!

why doesn't alwaysvisible work? That to me would seem like the parameter that should work but it doens't really do anything but stack up the sub menus

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 16:56:40 GMT

Hi,

Well, without going into involved programming, the Milonic menu is designed so that the only difference between a submenu and main menu is alwaysvisible. So when you add always visible to a submenu you convert it to a main menu and it is looking for top and left position.

Now, I do have a solution that will work, and might be better than openmenusbyurl since you only want this on the main page. And, I notice the pages say aspx, so I don't know how you could set it up so as to do a pagematch which is what you would need for openmenusbyurl to work. So, here is my solution

1. you will need to create a separate data file for the home page. That file will be the same as your menu_data.js file now, except you will remove the MenuManagedHostingHome, MenuDevelopmentHome and MenuClientPortalHome submenus. Save the file as home_data.js. I try to name them with names that trigger what they are

2. On the main page, the menu div will be this now. The only way I could do it was with a table...

Code:

<DIV id=homeMenu style="MARGIN-BOTTOM: 10px; HEIGHT: 240px">
<table cellpadding=0 cellspacing=0 width="100%" border=0>
<tr>
<td>
<SCRIPT language=javascript type=text/javascript>
<!--      
with(milonic=new menuname("MainNavigation")){
style=menuStyleManagedHosting;
alwaysvisible=1;
orientation="vertical";
position="relative";
aI("itemwidth=236px;title=MANAGED HOSTING;statusMANAGED HOSTING;image=btn_hosting_over.gif;url=mangedhosting.aspx;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Ektron Hosting;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Managed Services;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Dedicated Solutions;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Case Studies/Testimonials;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Facilities;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Requests For Quotation (Hosting);url=");
aI("status=Why host with us?;image=btn_whyhost_off.gif;overimage=btn_whyhost_over.gif;showmenu=MenuWhyHost");
}
drawMenus();
//-->
</SCRIPT>
</td>
 <td>
<SCRIPT language=javascript type=text/javascript>
<!--      
with(milonic=new menuname("MainNavigation1")){
style=menuStyleDevelopment;
alwaysvisible=1;
orientation="vertical";
position="relative";
aI("itemwidth=237px;title=DEVELOPMENT;status=DEVELOPMENT;image=btn_development_over.gif;url=development.aspx;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Capabilities;url=http://www.milonic.com/login.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Our Process;url=http://www.milonic.com/mylicenses.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Partnerships;url=http://www.milonic.com/myinvoices.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Portfolio;url=http://www.milonic.com/reqsupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=How We Work;url=http://www.milonic.com/mysupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Requests For Quotation (Development);url=http://www.milonic.com/mydetails.php;");
aI("status=Why develop with us?;image=btn_whydevelop_off.gif;overimage=btn_whydevelop_over.gif;showmenu=MenuWhyDevelop");
}
drawMenus();
//-->
</SCRIPT></td>
<td>
<SCRIPT language=javascript type=text/javascript>
<!--      
with(milonic=new menuname("MainNavigation2")){
style=menuStyleClientPortal;
alwaysvisible=1;
orientation="vertical";
position="relative";
aI("itemwidth=237px;title=CLIENT PORTAL;status=CLIENT PORTAL;image=btn_clientportal_over.gif;url=clients.aspx;");   
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Login;url=http://www.milonic.com/login.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Licenses;url=http://www.milonic.com/mylicenses.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Invoices;url=http://www.milonic.com/myinvoices.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Make Support Request;url=http://www.milonic.com/reqsupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=View Support Requests;url=http://www.milonic.com/mysupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Your Details;url=http://www.milonic.com/mydetails.php;");
aI("status=Why be a happy client?;image=btn_whybeclient_off.gif;overimage=btn_whybeclient_over.gif;showmenu=MenuWhyBeClient");
}      
drawMenus();
//-->
</SCRIPT></td>
</tr>
</table>

</DIV>

Since that would only be on the home page, and you'd call the home_data.js instead of menu_data.js file that would be the only page on which this would appear. It solves the problem of people who reach the website from different links. This is a problem with openmenusbyurl when you use pagematch because what if someone goes to serverside/ they would get the opened menus, but if the link is serverside/whatever.aspx then they wouldn't get the open menus.

That's all I can think to do right now. To recap, the home_data.js and menu_data.js files are exactly the same except for home_data.js doesn't have those 3 submenus which are now part of the 'main' menus on the home page. On all other pages you call the menu_data.js file, and the main menu is just the original one you had, horizontal so you'd just have the main header items which opened the 1st submenu with the Why at the bottom and they would open the second submenus just as they do now. Hope that made sense.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Friday January 11 2008 - 17:00:43 GMT

cool! That is really thinking outside the box. I think that will work! Thanks

The last thing is I need a subimage on the subsmenu items that have submenus themselves. However, as you can see, I don't want the sub arrows for the bottom "Why" image based menu items. I dn't want the arrow to be there. Can I override the styliing changes inline for the menu item?

Thanks for all your help.

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 17:09:33 GMT

Hi,

Well, you can try

1. add subimage=; or subimage=none; to those items.
2. if that doesn't work, you can remove the subimage from the style of the menus with those items and add it to the particular items that need subimage.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Friday January 11 2008 - 17:25:18 GMT

Everything looks fantastic now...

http://clients2.serverside.net/serverside/?action=home

http://clients2.serverside.net/serversi ... on=content

I was able to do everything I needed except the sub menus for submenus but I was able to get that to look pretty good as well (good enough for me)

I really appreciate all the help Ruth. We've done over a dozen menu implementations and this was the most complicated layout by far.

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 17:50:19 GMT

Hi,

Not sure what you mean by the submenu comment.

One thing I forgot to mention. In the items that open from the why buttons, since they are not links to click, you could add to each of those items pointer=default; and then the cursor will not changed to a hand, it will stay an arrow.

Code:

aI("pointer=default;text=Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.;rawcss=padding:12px;");

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Friday January 11 2008 - 18:21:38 GMT

I have something for you to try for that menu capabilities submenu

Here is the subimage for it [not real easy to see on the blue but it's there], and the aI string coding. Then see below for coding that menu.

Code:

aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Capabilities;url=http://www.milonic.com/login.php;showmenu=MenuCapabilities;subimage=arrow.gif;onsubimage=arrow_over_up.gif;");

Then that menu capabilites submenu would be

Code:

with(milonic=new menuname("MenuCapabilities")){
style=menuStyleDevelopment;
menuwidth="237px";
top="offset=18";
left="offset=-237";
openstyle="up";
aI("type=disabled;image=spacer.gif;imageheight=5;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Content Management System;url=http://www.milonic.com/login.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=E-Commerce Systems Integration;url=http://www.milonic.com/login.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=.net, ASP, SQL, Flash<hr>;url=http://www.milonic.com/login.php;");
aI("type=disabled;image=spacer.gif;imageheight=5;");
}

You'll see that I put a hr rule code in the .net, Asp etc item. Now, you could instead make that spacer image into an 5px high image that has a 1px yellowish colored line at the top and the rest transparent to give it a line the same color as the text. I just thought this might solve the problem of the submenu opening at the side. This way, since it is not really high it would open up above, not really go over much of the flash and keep in line with the main menus.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Friday January 11 2008 - 18:31:33 GMT

okay great advice thanks! I'll experiment a little more with it

Thanks Ruth! I'm very happy with how this all turned out. You sure know your stuff

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Monday January 14 2008 - 16:20:28 GMT

one more question Ruth and I'll be out of your hair

Can you overlay a separate image or another Milonic menu over the Client Login Menu? I'd like to place a graphic/menu item over the client menu as indicated here with the "Please login..."

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Monday February 4 2008 - 18:57:20 GMT

My Menu background image is not display for sub menus under development tab at the top. Am I doing something wrong?

http://...?content=content_development

Thanks!

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Monday February 4 2008 - 21:23:20 GMT

I forogt, you need to upgrade to the newest version, 5.790. .89 had a bug fix and 90 has a change for prototype [about which I could say something, but won't since it wouldn't make them any different in their action/attitude] anyway, Milonic has again for the zillionth time changed their programming because of again a function name which prototype has decided to use in their programming

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Monday February 4 2008 - 21:17:19 GMT

Hi,

You seem to have two styles called the same thing.

1.with(menuStyleDevelopmentSub=new mm_style()){ which has the background images in it.
2. menuStyleDevelopmentSub=new copyOf(menuStyleDevelopment) which is copying the menuStyledevelopment which has no background images in it.

I have to think that has something to do with it.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Monday February 4 2008 - 21:20:59 GMT

wow that was a rookie mistake! :oops:

I'm gonna pretend I never ever posted this ahahahahahaha

Thanks again Ruth... always there when I need your help

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Monday February 4 2008 - 21:34:59 GMT

okay I'll make sure to do that before we launch.

I won't get into who does what either but if people are forcing changes, I'd like to throw my hat in riing and ask the tree menu get overhauled so it can open the "sub-tree" on mouseover instead of only on click. Whatever function runs onclick should be able to run onmouseover I would think.

I think that is a VERY important feature for the TreeMenu that is currently lacking.

Thanks!

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Monday February 4 2008 - 23:22:09 GMT

Hi,

You'd need to contact Milonic with the suggestion. I don't know that it would be possible, or maybe it would be too involved in programming to do that. What the treemenu does is when it is clicked it 'shoves' the stuff below it down. I don't know how you'd do that with a mouseover since that actually opens a different block of stuff.

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Tuesday February 5 2008 - 16:18:24 GMT

Ruth wrote:

Hi,

You'd need to contact Milonic with the suggestion. I don't know that it would be possible, or maybe it would be too involved in programming to do that. What the treemenu does is when it is clicked it 'shoves' the stuff below it down. I don't know how you'd do that with a mouseover since that actually opens a different block of stuff.

Ruth

Thanks Ruth... one more question. I there a way to force a tree menu sub to open at page load?

Thanks again!

Re: Is it possible to create a menu that looks like this?

Poster: Ruth
Dated: Tuesday February 5 2008 - 17:04:11 GMT

Hi,

Yes, there is something called openBranchByName. I haven't used it. I've done some research over time to find out about it, and posted in response. It seemed to work OK, so I guess I got it right

viewtopic.php?p=40040#p40040

viewtopic.php?p=42606#p42606

Ruth

Re: Is it possible to create a menu that looks like this?

Poster: nwilcox
Dated: Tuesday February 5 2008 - 17:26:48 GMT

worked like a champ! Thanks Ruth!