Horizontal main menu with vertical/horizontal submenus

Poster: screenmates
Dated: Tuesday January 23 2007 - 15:26:18 GMT

I have a requirement to layout the main menu horizontally and submenu items vertically for the hilighted item (and horizontally for the clicked item). Example:

Main menu:

File - Edit - Application - Window - Help

File submenu:

New
Open
Close
Print
Exit

Edit submenu:

Cut
Copy
Paste
Select All
Undo
Redo

If I mouse-over File or Edit main-menu items, the sub-menus should show as a dropdown list (which is what most of the examples on this site do). Now, if I click Edit main-menu item, the Edit main-menu should become a plain text (highlited & unclickable) and all the submenu items of Edit menu should display as a horizontal list right under the main-menu. Further, if I click Edit->Copy submenu item, the above action should be performed in addition to executing code in the Copy submenu item:

File - Edit - Application - Window - Help
Cut - Copy - Paste - Select All - Undo - Redo

In the above example, the Edit main menu item should become a plain/highlighted/unclickable text while the Copy submenu item should be highlighted and could be either clickable or plain. However, the other main-menu items should still show dropdown submenus on mouseover. The purpose of this is to display all the submenu items as a dropdown list (default) on mouseover but display as a horizontal list (single row) right under the main-menu on clicking any main-menu item or submenu item - instead of displaying it as a vertical list on the left navbar - to:

1. save horizontal space on the content area
2. have them readily accessible
3. provide a visual-cue to the currently selected menu item

Could someone help me with how I go about configuring the above?

TIA

Poster: Andy
Dated: Tuesday January 23 2007 - 21:48:03 GMT

Is it possible you can mock up some images of how you see this working?

A picture tells a thousand words and will help me better understand your request.

Cheers,
Andy

Poster: screenmates
Dated: Wednesday January 24 2007 - 6:42:51 GMT

Andy,

I don't have screenshots but can try to come up with some. I saw this menu system somewhere but cannot recollect where. However, I've just seen one of your demo examples (Amazon) that is similar in functionallity but uses tabs which is not what we need. We like the Static Background Item Images menu (http://www.milonic.com/menusample71.php) for the horizontal main menu with background images and vertical submenus (without background images. I noticed some glitches on mouseovers with the Amazon style menu example such as displaying submenus for the wrong mainmenu item instead of the currently highlited item, flicker with submenus, etc.

In any case, the one I have to come up with is a mixture of your other horizontal menus and the Amazon menu. All submenus display as dropdowns from the main horizontal menu. When the user clicks any menu item, it should become a bolded/hilighted text (non-clickable) and its submenu items should get drawn horizontally right under the main menu bar (similar to Amazon submenus but without background images) while other menus still display dropdown submenus on hilighting them. The same should happen when a submenu item is clicked, too - in addition to bolding the clicked submenu item (clickable) in the horizontal list. When the user clicks another main-menu item or submenu item of another main menu item, its submenu items should be drawn horizontally under the main menu again.

In other words, each main menu item should display its submenus as dropdowns until it is clicked or one of its submenu items is clicked and then its submenu items are drawn as a horizontal list (sticky) under the main menu bar. Bolding the main/top menu item and drawing the submenus horizontally on clicking the main/top menu item should happen on the client. However, clicking a submenu item should result in a round-trip to the server to load the linked page before it is bolded and its top menu item is highlighted/bolded and its submenus (siblings) are drawn horizontally. Again, clicking on a different horizontal/sticky submenu item should also result in a round-trip to the server similar to the above action of bolding/highlighting/etc.

Thanks much for your time...

Poster: Ruth
Dated: Saturday February 3 2007 - 3:03:23 GMT

Hi,

I was going to try working on this but want to make sure I understand what you want.

1. The main item has a url plus a showmenu.

2. If you mouseover the main item then it shows a vertical submenu with items in it that can be clicked to go to some page.

3. When the main item is clicked it will go to a page and the original submenu now has to be totally different, it must be horizontal and all the items are now only header types, that is only text with no showmenu calls or links and this submenu must be alwaysvisible when you are on the linked page.

4. If the main item isn't clicked but some item in the main items submenu is clicked it should also do the same thing.

5. All the other main items will remain as mouseover to a vertical menu, no matter what page and then when you click those items the same process is to occur for their menus?

I'm not sure I can figure out a setup like that, but wanted to make sure I understood it before I tried.

Ruth

Poster: screenmates
Dated: Saturday February 3 2007 - 8:36:09 GMT

Ruth,

You almost got the idea. Just one clarification:

3. When the main item is clicked it will go to a page and the original submenu now has to be totally different, it must be horizontal *** and all the items are now rendered right under the main menu bar as a horizontal submenu (preferably with the currently clicked submenu item bolded) and this submenu must be alwaysvisible when you are on the linked page. Please note the current horizontal submenu items are still clickable while the corresponding mainmenu item will be a bolded header/text. ***

This is a simple setup of one-level submenus (menubar and submenu) similar to a tab-menu. No sub-sub-menus. Your other points are on the same page.

I guess Milonic could come up with an advanced menu layout like this and add to their arsenal of examples. However, you already have a similar menu in Amazon-style example so the task is already half-done!

By the way, I could not come up with screenshots so far but have just found another website that has this layout: http://www.monster.com (need to be logged in to see it in action). Hope that helps.

Thanks much for your time. I appreciate it.

Poster: screenmates
Dated: Saturday February 3 2007 - 17:54:18 GMT

A better and easier way for you to do this might be to convert the current/clicked submenu's ORIENTATION into a *horizontal* static/alwaysvisible menu (while the current/clicked mainmenu item would be a static bold header in oncolor) while other submenus are usual vertical dropdowns.

Thanks,

Poster: heart
Dated: Friday July 13 2007 - 18:53:38 BST

I installed a new board style on my forum this is the view in IE and the menu bar is going vertical and I need it to go horizontal as it does in Firefox can anyone help:

Internet Explorer View:


Firefox View (which I like):

Poster: Ruth
Dated: Saturday July 14 2007 - 16:29:19 BST

Hi,

If this is a Milonic menu, then you'd set the orientation="horizontal"; in the main menu. If it's not, then we would have no idea, you'd have to contact the menu maker. If it is Milonic, you'll need to give us the website so we can see what's going on.

Ruth