Main menu rework

[roman-yagodin]

New main menu features:

• [x] Simple to navigate.
• [x] Touch-friendly (do not use hover / hoverIntent) #15
• [x] Based on Bootstrap components with minimal tweaking.
• [x] Written in Razor #102
• [x] Support localization.
• [x] Support custom URL formats.
• [x] Have two-level dropdowns.
• [x] Fully accessible via keyboard (a11y).

Optional:

• [ ] Accordeon-style collapse.
• [ ] Full custom URLs.
• [ ] Menu items decorations (e.g. badges with dates).

[roman-yagodin]

Current concept is a semi-megamenu:

• Plain level 0 (standard Bootstrap navbar).
• Level 1 menu which pushes down content, with col-* classes to be responsive.
• Dropdown level 2 menu (standard Bootstrap dropdowns)
• 1 and 2 level menus have additional links to navigate to the parent pages (as a variant, we could provide two buttons for each such item - one for the link and one for opening dropdown, although it will take more horizontal space).

Pluses:

• Much less items visible at first compared to megamenu.
• Much more space to place level 1 items.
• No issues with megamenu placement of blocks with different size.
• Visual searching for required menu item combined with physical actions (opening dropdowns).
• More clear navigation than with two-level dropdowns.
• Level 2 menus could be loaded dynamically to greatly reduce menu markup size.

Keyboard navigation going between levels 0 and 1 in the current concept is wrong, and so is the level 1 menu placement in mobile view.

[roman-yagodin]

Variant with separate buttons for navigation and dropdown turned up not so promissing:

• The separate dropdown buttons take out more precious horizontal space for level 0 menus. Not an issue for level 1 menus, but still.
• Placing buttons with different kind of functions too close to each other doesn't make UI clearer - it's very easy to miss one and click the other instead.

So we should stick to current concept, just need to figure out how to make navigation to the parent pages from dropdown clearer - e.g. add some text like "Go to ..." / "Open page..." or make additional row for level 1 items.

[roman-yagodin]

I think current main menu concept is OK for the beta. The only thing currently missing is proper keyboard navigation - all menu items is accessible, but not in correct order, so it require additional steps to navigate in- or out- of level 1 submenus.

[roman-yagodin]

Need to explore passing additional parameters via MenuNode.CommandName and MenuNode.CommandArgument through the NodeManipulator. This would allow to display dates in badges for news entries, star featured pages, mark new pages, etc.

[roman-yagodin]

Two-level dropdowns issues in trunk:

• Second-level dropdown menu remains open when user reopens first-level dropdown. Probably need to override "hide.bs.dropdown" on first-level dropdown to hide also second level.
• Keyboard navigation is somewhat broken:
  • Navigating with Tab / Shift-tab via both levels are OK
  • Down/Up arrows toggle second-level dropdown on dropdown items (expected - navigate between items in first-level dropdown) - better to use Left and Right keys for that.
  • Down/Up arrows inside second-level dropdown toggle first-level dropdown (expected - navigate between items in second-level dropdown).

[roman-yagodin]

On second thought, it's looks better to implement second-level dropdowns with just collapse.