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.
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.
Doug, fantastic idea and component… you really should be charging for this… right after I download the source code… 🙂
Great work as usual ! 🙂
Is the best
Pingback: MadeInFlex » Blog Archive » Componente Verical MenuBar
can you rotate them 90?
I was trying something, but it mass up everything.
Nice one
How can i add icons to the menu items?
It’s possible the Scrollable Menu Controls in Vertical Menu Bar Control?
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?
How can i add icons to the menu items?
this is great. but i think it will better if the menu is accordion menu,that slide vertically..new challenge for you.
How can i use the click event on the items with submenu? in the example the MenuItem 2-B and MenuItem 3-B
Thanks
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
@ 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
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.
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?
Hi, this is great 🙂
If I can ask,how i can do rotate this for 90 CW?
This be usesful.
Nice job! However, how can I change background colors when I move the mouse over the menu items?
Hi, how I can set vertical gap?
thanks
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
Great job Doug
nice work done. i used it in my project. thanks for source
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
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