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

[nwilcox]

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?



Thanks!

[nwilcox]

Can anyone determine if this possible?????

Thanks!

[Ruth]

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

[nwilcox]

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!

[Ruth]

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

[nwilcox]

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!

[Ruth]

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

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

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

with(milonic=new menuname("MenuDevelopment")){
style=menuStyleDevelopment;
menuwidth="237px";
menuheight="210px";
itemheight="18px;"
aI("text=Login;url=http://milonic.com/login.php;");
aI("text=Licenses;url=http://milonic.com/mylicenses.php;");
aI("text=Invoices;url=http://milonic.com/myinvoices.php;");
aI("text=Make Support Request;url=http://milonic.com/reqsupport.php;");
aI("text=View Support Requests;url=http://milonic.com/mysupport.php;");
aI("text=Your Details;url=http://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: Select all

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

[nwilcox]

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.

[Ruth]

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

[nwilcox]

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

[Ruth]

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://milonic.com/openmenusbyurl.js

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

Ruth

[nwilcox]

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.

[Ruth]

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

[Ruth]

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

Ruth

[nwilcox]

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!

[Ruth]

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

[nwilcox]

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

[Ruth]

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

<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://milonic.com/login.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Our Process;url=http://milonic.com/mylicenses.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Partnerships;url=http://milonic.com/myinvoices.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Portfolio;url=http://milonic.com/reqsupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=How We Work;url=http://milonic.com/mysupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Requests For Quotation (Development);url=http://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://milonic.com/login.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Licenses;url=http://milonic.com/mylicenses.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Invoices;url=http://milonic.com/myinvoices.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Make Support Request;url=http://milonic.com/reqsupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=View Support Requests;url=http://milonic.com/mysupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Your Details;url=http://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

[nwilcox]

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.

[Ruth]

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