Menu Suggestions - IBM.COM

[hanleyhansen]

Hello guys,

I am new to the forum. Looks like a great scripting site. I am actually learning PHP now so I expect to be back here all the time. Anyway, I have been searching restlessly online for a way to reproduce the menu navigation from ibm.com can anybody please point me in the right direction? Ultimately I need to implement that in Joomla! so I figured I make it work in an HTML site and then figure it out for Joomla! later. Can anyone please help me with any of the above? It will be highly appreciated.

Hanley Hansen

[jscheuer1]

This looks pretty close:

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

See Example 3 on that page.

[hanleyhansen]

I'm looking for it to expand the menu. The submenu with all the links slides down and expands the whole page. Any idea how I can accomplish that?

[jscheuer1]

I missed that. Since nothing happened on hover, I assumed it was a simple menu. I've never seen a menu exactly like that. But with a script library like jQuery you could have each menu item linked to content on the page that's display:none; and have that content slideDown() when clicked. In most cases I think it would cover what's below it though, instead of push it down. But that could be done. jQuery could also handle the horizontal scrolling duties.

Anyways, from what I can tell IBM used a similar library called dojo. And imports the menu contents from another page (their sitemap page) via AJAX (jQuery can do that too). But the exact script is in house and copyright:

/* $Id$ 
 * Copyright (c) 2011 IBM Corporation
 * Owner: Corporate Webmaster (NUS_N_NIWWW)
 */
if(!dojo._hasResource["ibmweb.config"]){dojo._hasRes . . .

So we can't use it.

A nice twist is that if javascript is disabled or unavailable, there are only two menu items. The logo one for home and a link directly to the sitemap page. This enables non-javascript enabled browsers to navigate the site and search engines to index the site.

I would say that whoever did it, perhaps it was a team, had a lot of time to work it out and/or were building on projects already completed. I could probably make something similar using jQuery, but the amount of work would be prohibitive as for what is generally offered as free help here in these forums.

[hanleyhansen]

John,

Thank you for the info. I did make it that far and realized that they were using Dojo. I don't need to replicate their exact menu. What i am looking for is onclick for the menu expand that submenu and reveal the links. I don't care if they auto populate. The horizontal scroll feature would be a nice addition. Also, are you familiar with Joomla!? Ultimately the goal would be to include this menu into my Joomla! template. What would it cost for you to do that? Just to enfasize, onclick we want the submenu to expand and revel the pertinent links, that is all.

I was thinking having a huge hidden div that onclick becomes visible at a certain position therefore revealing the links for that menu. What do you think? Correct my logic if necessary.

[hanleyhansen]

I've found jquery plugins that collapse text and expand the page similar to what ibm is doing. I think with a combination of different things we can get close to what we are looking for. I just lack the expertise at the moment because I just started learning javascript and PHP a week ago. So any help you can provide will be highly appreciated. I am also willing to pay for your assistance.