Flex/Flash/Actionscript

Vertical MenuBar Component

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.

View the source.

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 movie requires Flash Player 9.

Related:

  • Pretty sweet logo, whoever designed that must be pretty much the best person in the world. Get your 360|Flex stuff here. And if you haven't registered for 360Flex, do that here.
    Tags: flex
  • Since the next 360|Flex is fast approaching, I thought I'd post the full recording of my session at the last 360|Flex in Seattle. You can do whatever you want with this video, embed it wherever, watch it wherever, you can even download the original mp4 video file. Hopefully the embedded…
    Tags: flex, that's
Standard

25 thoughts on “Vertical MenuBar Component

  1. 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.

  2. Pingback: MadeInFlex » Blog Archive » Componente Verical MenuBar

  3. 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?

  4. Sonny says:

    this is great. but i think it will better if the menu is accordion menu,that slide vertically..new challenge for you.

  5. Andrea says:

    How can i use the click event on the items with submenu? in the example the MenuItem 2-B and MenuItem 3-B
    Thanks

  6. Steve N says:

    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

  7. Brian M says:

    @ 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

  8. 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.

  9. 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?

  10. dilip says:

    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

  11. alf_gon says:

    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

  12. leo says:

    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

Comments are closed.