Creating drop down menus

Applies to:
Working with BrowserBob

Drop down menus can be created using panels. Use panels to outsource functionality provided by buttons to a drop down menu. So you can provide a big range of functionality for the user of your application, without overloading the interface with too many buttons. Drop down menus are usually  opened via the click of a button. The menu closes when the mouse pointer leaves the visible part of the menu panel.
 

 

 

 

 

 

 

 

 

How it works:

 

 

 

 

 

 

 

 

 

  • Preparing a Panel for menu functionality
    Add a panel to the design area first. Then select Menu from the Role drop-down list on the panel's property window.

    Now decide on the panel's alignment depending on its planned behaviour when the application is resized.

    Since in BrowserBob a drop down menu is created by the team-play between a panel and a button, the alignment of both the panel and the button opening the panel should definitely be the same.

 

 

 

 

 

  • Setting up the panel button
    Add a button to the design area.
    Select our previously added panel as the button's action
    Target.

    On clicking the button we'd like to make the panel appear. So choose Show in the Action drop-down list.

    Choose the same alignment for the button as you did for the panel.

 

 

 

 

 

 

 

 

 

 

  • Arranging the Panel and the Button
    Drag the panel over the button.

    Check the basic functionality of the menu by switching to test mode.

 

 

 

  • Adding Menu Items
    Add a button for every menu item and assign the corresponding actions to these buttons.


    Verify the functionality of your panel by changing to test mode.

 

 

 

 

  • Giving the menu a nice graphical appearance
    Exact design of your graphics is the most important part for the  professional look of a menu.


    To arrange the images in BrowserBob with the accuracy of a pixel, they should already be harmonized in your graphics application.

    For the menu shown on top of this page, we used the graphics shown to the right.

 

The button to open the menu:

 

 

 

 

 

 

The background of the panel:

 

 

 

 

 

 

Two images for each menu item button:

 

 

 

 

 

 

 

 

 

 

Related topics:
Panel object

Button object

Advanced Browser template