Previewing Morfik’s MenuBar control

In search of the ultimate navigation system for Morfik web applications we have come to the realization that just mimicking desktop-like menus on the web is not going to work. The use of desktop-like menus on the web has largely been criticized for its lack of usability, accessibility and scalability. Despite the criticism, desktop-like menus have been high on the list of most requested features for a long time. However, I feel there are merits to the criticism leveled against them that need addressing in order for a successful adaptation of these menus on the Web.

For us, writing client-side menu logic is pretty straightforward as the Morfik IDE provides a set of features such as high-level language, cross compiler, framework, code editor, debugger, etc. that make such an undertaking much more effective (and more enjoyable) than doing it completely in JavaScript. However the goal of developing menus is much more challenging in the context of Morfik’s architecture. Morfik’s paradigm of bringing RAD to web development is one of most unique aspects of our software. The design-time behavior and the way one designs web interfaces is just as important as the way these interfaces behave at run time. This is a fundamental requirement for our software, one that can’t be compromised!

As most of you already know there are many Ajax implementations of desktop-like menus. However many leading websites employ navigation systems that, though having some resemblance to desktop-like menus,  incorporate some new capabilities.

For example, Dell’s drop-down menus make an interesting use of layout to structure navigation choices. They are inherently temporary and go away automatically when users move the pointer to another top-level option or to a “regular” part of the screen.

The Action Envelope site, in addition to using layout for structuring navigation choices, introduces a login user interface to the navigation system. This is a very powerful addition that is almost completely missing from desktop-like menus.

We felt that Morfik had to dig deeper in order to find an answer to this challenge. After a long development cycle we have come up with a new approach that, in our opinion, will not only meet the highest expectations of our users but hopefully will also change the view of some of the critics of drop-down menus. Morfik MenuBar is our answer to this challenge! It has the benefits of desk-top menus and at the same time addresses the usability issues. Morfik MenuBar introduces the following unique characteristics:

  1. Navigation choices are structured through layout
  2. Navigation choices are distinguished through typography and icons
  3. Navigation choices can be augmented with other controls
  4. Navigation choices are optionally retrieved from a database table

Designing Menus

The Menubar control is a flow-layout container with extra features allowing the addition of menu items, submenus and standard controls through a right-click context menu. The flow-layout engine automatically positions such controls one after another. Menu items are justified to fill all the space on the menu bar. If AutoSize mode is on (default), MenuBar itself adjusts its size to accommodate the largest menu item. Both Flow and AutoSize mode can be switched off, treating MenuBar as a normal design surface, supporting the conventional methods of placing and positioning controls.

SubMenu is effectively a Drop-down control that embeds another MenuBar within itself. With this approach it’s possible to design nested multi-level menus utilizing the powerful features of the Morfik Form Designer.

Like all other Morfik controls, the MenuBar control supports the concept of styles, so it’s possible to design different menu styles and easily switch from one style to another. Click here to view a live demo of menus showcasing Morfik MenuBars using different styles. In this demo we have showcased four different style menus that are used in DellVirgin Blue, Technorati and FlashDen websites.

Drop-down Control as the building block for MenuBar

We started work on MenuBar in Morfik 2.1 when we introduced the Drop-down Control (see example here). A modified and much improved version of the Drop-down Control is used as the building block for this new control.

The Drop-down Control is effectively a button and a popup container joined together. However, to make it look like a single object and therefore more appealing we had to extend Morfik’s graphical engine to support complex shapes, so that effects like corners, gradients, shadows, etc., can be applied to the whole control rather than to its individual parts. Another important technology that was employed to make menu designing practical is the Flow-Layout container, which was also introduced in Morfik 2.1. Unlike Plastic Layout which is used as a standard mode of Morfik Form Designer, Flow-Layout container positions elements one after another horizontally or vertically using a browser-like fluid mode. Each control has a “Margins” property specifying offsets between the control and surrounding controls. The position of each element inside Flow-Layout container is entirely determined by its index within the parent controls collection, and is controlled by flow-layout engine.

Data-bound Menus

Another important consideration for MenuBar is its ability to dynamically load navigation choices from a database and display them inside a menu drop-down. This can be achieved by placing a continuous form inside a Menu drop-down container presenting navigation choices from a data source.

Due to the dynamic nature of continuous forms the exact size of a drop-down container cannot be determined at design-time. This requires supporting run-time resizing of the drop-down portion. To achieve this we use the same approach as with container controls that support dynamic growing/shrinking of the graphical effects. In such cases, the graphical image in a complex drop-down is split into multiple parts during the image generation stage of compilation and is rendered through a set of html elements, allowing for dynamic resizing of the MenuBar at run-time.

Availability

Morfik MenuBar is expected to be released as part of the next major update. There is still work to be done to address some performance and usability issues. We also need to test this new control under a wider range of scenarios to ensure the current design can support the anticipated range of web menus and data-bound navigation systems.

Online demo is available here.

If you have any comments, please share them with us so we can explore possibilities for enhancing the design as required.

9 Responses to “Previewing Morfik’s MenuBar control”

January 22nd, 2017
Aquiles Rodriguez says:

Congratulations ! very nice

In Virgin Style, look at the original Virgin Site, when the mouse is over any Company line a popup window is displayed with text as help or simple information.

Dalton Calford says:

The fact that the menu is database driven is wonderful! It is one step to making the Morfik environment support multiple languages.
With the database driven design, we can set up the display label based upon the required language.
I would love to see database driven form generation as well. This would allow for easy language updates and lead to end user form editing.

Mocte says:

Well done !!!

Awesome, I really needed some menu control but you have surpased all my expectations, congratulations for such a good work.

Regards,
Mocte

Rafael Liriano says:

@Dmitry Medvedev:

Much better now!!

Rafael,

Your Point is correct, and it does work better if navigator is placed on top, this way drop down is not closed when you navigate through data source. I’ve just deployed updated demo.

Regards,
Dmitry

Rafael Liriano says:

Powerful and flexible!!, excellent work!. Please, for the database driven menu allow to place then navigation button at the top too, I mean, when the drop down height change when navigating we have to move the mouse to reach the navigation button and if you hit fast you could select other choice by error. (sorry for my English, I hope you get the idea).

Khalid Elbarjaj says:

Sounds very nice. A flexible menu which can be defined in a table. I.c.w. authorization you could easily display or hide menu items. Looking forward to the major update.

Khalid Elbarjaj says:

@Darryl Strickland:

I am looking forward as well to this menu bar control. I believe it is a major plus for the product. Especially the concept of dynamic generations by i.e. reading from a database setup is making it very dynamic and flexible to maintain/change/extend etc. You could for i.e. based on authorization display or hide a menu item.

Darryl Strickland says:

The MenuBar appears to be exactly what I need. Thanks so much for your effort and I looking forward to the next major update.

Leave a Reply

Fields marked by an asterisk (*) are required.