Menu: horizontal bar style top-level menu

Menu: horizontal bar style top-level menu

Today I fiddled around with the Menu widget. Since the standard Menu lacks the option to have the top-level menu appear as a horizontal menu bar I tried to modify the Menu's code to achieve exactly that.


I introduced a new option "topstyle" that causes the top-level menu to appear as a bar if set to "bar", that is if the menu is created like so: $( "#menu" ).menu({ topstyle: "bar" });. If left alone or set to anything else the Menu just works as before.


The result can be seen here: http://jsfiddle.net/gcgrzz07/
(shows the default widget demo, so ignore the icon table and concentrate on the menu below it)


The "carat" icon is changed to the one pointing south when shown in the horizontal bar (added "submenubar" to the "icons" option). The new option "positionbar" replaces the "position" option when opening immediate children of the horizontal bar. The keys have been reassigned for the top-level menu if shown horizontally (arrow-left moves to the previous item, arrow-down expands, etc.). I had to add three additional entries in the style sheet that take care of the bar type menu and its items. I assume that no icons are introduced in the top-level menu (with <span class="ui-icon ui-icon-play"></span>) when shown as a bar. If you do then the icons will overlap the text. Currently this behavior is not configurable (but you can have non-overlapping icons in the bar if you modify the style sheet, that is if you remove the .ui-menu-icons .ui-menu-bar-item entry).


Do you think that a modification like that could make it into the official code base? Or shall I stick with a custom widget that overrides the Menu's behavior?


Best Regards,
   Harald