Someone on the Adobe Flex forum asked a question about being able to have vertical menus using a MenuBar component. The response from Peter Ent from Adobe was that no, Flex does not include a MenuBar component that can handle vertical menus, but feel free to make one yourself and post it <hint, hint>.
After I read that it felt like a challenge, so here’s the solution: a Vertical MenuBar component. It extends MenuBar and works the same way, except the Menu items are stacked vertically and the menus open up either to the left or to the right of the menu bar. I’ve included the full source, it uses two classes, one that’s an extension of mx.controls.MenuBar, and another one that’s an extension of mx.controls.menuClasses.MenuItemRenderer. You can specify whether you want the menu to open to the left or the right by using the new direction property of the new component.
I tried to document the code really well, so it should be fairly straightforward if you take a look. I managed to get around needing access to all the private methods of MenuBar by repositioning the menus after they are placed on the stage and are shown. The instant they’re shown they’re moved to the right position. The one caveat is that this breaks the openDuration style of the Menu. If openDuration is set to use a Tween to animate the Menu opening, then I was stuck with showing the Menu during the Tween in the original position, then it would jump to the new correct position after the Tween finished. So you would see the Menu jump around after it opened, which was no good. So now openDuration cannot be used with the Vertical MenuBar, but I figure that’s not a big deal.
Here’s the example showing both the normal MenuBar component on the top, and then two versions of the Vertical MenuBar, one that opens to the right and one that opens to the left.
Entries (RSS)
January 25th, 2007 at 5:13 pm
This is really nice. It would make a fine addition to the Flex Components Library. Check out that site and upload your component. I believe you can even charge $ for it.
January 26th, 2007 at 1:27 am
Doug, fantastic idea and component… you really should be charging for this… right after I download the source code…
January 26th, 2007 at 3:11 am
Great work as usual !
January 28th, 2007 at 10:52 am
Is the best
February 1st, 2007 at 12:10 am
[...] Componente Verical MenuBar Doug McCune ha creado un componente basado en el MenuBar pero con la posibilidad de asignar la propiedad direction, la cual define si se quieren renderizar sus elementos horizontal o verticalmente. Vertical MenuBar Component [...]
March 6th, 2007 at 8:54 am
can you rotate them 90?
I was trying something, but it mass up everything.
March 14th, 2007 at 12:36 am
Nice one
May 23rd, 2007 at 10:37 am
How can i add icons to the menu items?
June 1st, 2007 at 5:11 pm
It’s possible the Scrollable Menu Controls in Vertical Menu Bar Control?
July 30th, 2007 at 4:57 pm
Hello, great job in this component.
But i having trouble to customize this, is possible change de height of menu items? I try everything, change scalgrid bottom and top … but nothing works… it is possible?
October 7th, 2007 at 7:15 pm
How can i add icons to the menu items?
October 22nd, 2007 at 1:56 am
this is great. but i think it will better if the menu is accordion menu,that slide vertically..new challenge for you.
January 30th, 2008 at 1:04 am
How can i use the click event on the items with submenu? in the example the MenuItem 2-B and MenuItem 3-B
Thanks
April 23rd, 2008 at 1:55 pm
Here’s a MenuBar challenge I’m having that I can’t find any discussion on. I have a menubar at the bottom of my screen, within either a ControlBar or ApplicationControlBar, the first time it is clicked open it cascades down and out of view (beyond the bottom of the browser). Only on the second time it is clicked will it cascade up and be visible. Any thoughts?
thanks
May 13th, 2008 at 9:06 am
@ Steve N
I was having the same issue… There are probably better solutions but I ended up modifying this component to either display up or display down based on given arguments.
I used the direction getter and setter but changed the Direction static const to allow for an UP and DOWN Direction.
I also modified the following so the menu renders up or down instead of left or right
-getMenuAt(index:int)
-moveMenuOnShow(event:MenuEvent)
-shiftSubMenu(menu:Menu, parentMenu:Menu)
-shiftRootMenu(menu:Menu, menuBar:MenuBar, item:IMenuBarItemRenderer)
Because you do not need to redraw the menu to stand vertically you do not need to include
-updateDisplayList(unscaledWidth:Number,unscaledHeight:Number)
-measure()
This component was throwing errors in flex 3 when the users mouse rolled over an item with a sub menu then back to the heading then back to the sub menu item again. I seemed to have solved the issue by removing the if(wasNull) check from getMenuAt.
Hope this helps
June 11th, 2008 at 12:53 pm
Here’s a question regarding MenuBars and this one in particular (vert menubar). I am working on a menu navigation that uses this particular Vertical Menu Bar setup with a slight alteration so I can access root menu items (not every item has a sub menu).
HOWEVER, I need each root item to have its own unique skin. Anyone have any clue how to go about doing this. I have it represented in the XML file with each main root item having an attribute “skin” which has a link to the png skin I wish to have it be. The other catch is this also leads each root item to need its own down and over skin so I need to set that too.
Any clue anyone?
Thanks.
September 17th, 2008 at 5:22 am
Hi
I find the same issue as Brian M
“This component was throwing errors in flex 3 when the users mouse rolled over an item with a sub menu then back to the heading then back to the sub menu item again. I seemed to have solved the issue by removing the if(wasNull) check from getMenuAt.”
However if I remove the if(wasNull) I still get the error, any ideas here?
November 22nd, 2008 at 4:50 pm
Hi, this is great
If I can ask,how i can do rotate this for 90 CW?
This be usesful.
November 30th, 2008 at 6:46 pm
Nice job! However, how can I change background colors when I move the mouse over the menu items?
May 6th, 2009 at 9:53 am
Hi, how I can set vertical gap?
thanks
June 15th, 2009 at 6:43 am
Hi,
How can we remove the space which comes on left-right side of menuitem?
I think its a default space for icon, but i dont required that space and i want to align the text vertically to the MenuBar text
Thanks
September 1st, 2009 at 9:24 am
Great job Doug
December 4th, 2009 at 12:24 am
nice work done. i used it in my project. thanks for source
December 6th, 2009 at 3:32 pm
Hi,
I’m trying to using it but it throws following error on Flex 3:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.controls.listClasses::ListBase/drawItem()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:4906]
On previous posts it was mentioned that: “I seemed to have solved the issue by removing the if(wasNull) check from getMenuAt. ” but I have tried it and error remains.
Has anyone been able to solve this issue and execute the Vertical Menu Bar without errors on Flex 3?
Thanjs
July 27th, 2011 at 12:05 am
Hi ,
When i tried this code for multiple level menus , for eg : 6 levels , it shows error . It eats up one menu level . can anyone please help ?
Thanks
January 23rd, 2012 at 5:53 am
That is really fascinating, You’re a very skilled blogger. I’ve joined your feed and stay up for looking for more of your great post. Additionally, I’ve shared your site in my social networks!