Horizontal Expansion of Menu

[Jonathan]

I have been attempting to implement a 'Workflow Progress' control for an application that I am building.  There are three major steps, the first two have three minor steps and the final has 5 minor steps.  I've been attempting to shoehorn the menu control into this as it appears to have 90% of the functionality that I need.  The dynamic open/close, the ability to remain open after selection and the animations are all perfect.  Vertical space in the app is at a premium so I've chosen to implement the menu horizontally, all very well and good.  The issue comes when I attempt to modify the behavior of the child <li> and their containing divs.  I'd like for the children to expand horizontally from the parent, and have subsequent parents shifted down.
 
Note: the ** below represent the 'selected' items (the current step of the workflow)
[*Major-1*][Minor-1][*Minor-2*][Minor-3][Major-2][Major-3] with the hover effect on unexpanded Major steps leading to:
[*Major-1*][Minor-1][*Minor-2*][Minor-3][Major-2][Major-3][Minor-1][Minor-2][Minor-3]...etc  Which is the default menu animation, but I cannot, for the life of me, figure out how to force the children to:

(1) Display inline
(2) Force expansion of the parent without having to use position: relative !important; and the resulting offsets on each level of stack.

Any thoughts?

Thanks!

[Kamen Bundev]

Hi Jonathan,

I'm not really sure what are you trying to accomplish - I wasn't able to understand from your description. Can you point me to a site with similar navigation already implemented, so that we can get a better idea? Thank you in advance.

Regards,
Kamen Bundev
Telerik

 

 

[Jonathan]

I've created a jsfiddle that replicates the behavior I'm looking for. 

http://jsfiddle.net/j6E5Y/24/

Each Major Step is represented by a full color, each minor by the 'light' version of the same color.  In the example shown, the 2nd major step is currently in progress, which is shown by the fact that it is expanded by default.  When you hover over the other major items, the currently expanded group closes, and the hovered one opens. 

[Jonathan]

Hi there Kamen,

I've created a text-based jsFiddle to demonstrate the functionality that I'm looking for. 

http://jsfiddle.net/j6E5Y/24/

The colored "Major" steps represent the top-level menu items and are indicated by their full-saturation background color.  The minor steps, which would correspond to the 2nd level menu items are colored in the 'light' color of their parent.  In the example, the 2nd major step is currently in progress as demonstrated by the fact that it is defaulted to open.  The other major steps, on hover, open their child items, exactly as the menu does, however  they are opened inline and horizontally.

If you have any questions about the example, please let me know.

J

[Kamen Bundev]

Hi Jonathan,

Seems you previous reply got in the spam filter for some reason and suddenly the ticket went to -20 hours late, when someone found it and restored it, so - sorry for the late reply.

The way I see it - you need something like a horizontal PanelBar, which we don't have out of the box. The Menu may still do the job though, but keep in mind that severe changes like this one are not supported and you may experience issues. Check the demo and decide for yourself. It may be best if you build it from scratch.

Regards,
Kamen Bundev
Telerik