Menu with 3 levels

Menu with 3 levels

  
Hi everyone,

I recently started working with outsystems, and i'm very impressed with what I've already seen. Now i'm working in a project and I want to create a menu with 3 levels, something like this

I know the intelliwarp menu but this is a bit diferent.
If someone couid help me it would be great.´
thanks
Hi Admilson,

My first cautious recommendation would be for you to consider whether you want a 3-level menu. From a navigation and usability standpoint, sometimes a 3-level menu just disguises what is a badly thought-out user flow.

If, however, you want to do such a thing, it is doable the same way as with other web development tools: using a good mix of javascript and CSS.

In this case, what you probably want is to create the sub-menus, and hide them using css. Then, when you decide to activate them (either by hovering with the mouse over the link of the 2nd level, or by clicking it), you'll:

1 - change the corresponding style to make it visible;
2 - position the menu in the right place;

I urge you to consider the user flow throughout your website, and think if there is not a better way to do what you're trying to achieve.

Regards,

Paulo Tavares
Thanks for your tips Paulo, I'll reconsider my options
Hi Admilson,

We had a situation where I thought we should use a third tier of menus, but with the help of Justin James, we put together a  Client_Side_Tab structure for the third level that worked out great.

Would be happy to share that with you if you want to go that way.

All the best,

Rod

Hi Rodney,

In first place thanks for your answer.
It would be great if you  could send me that example.

But the third level links in the menu will lead to diferent and independent places (Products), i don´t know if with the tabs_clientSide i can achieve that, but every help is welcome.

There is a drop down menu component that was just posted.  Currently it is a work in process and only works for IE...
http://www.outsystems.com/NetworkSolutions/ProjectDetail.aspx?ProjectId=183
Hi all,

Just a quick correction to what Rebecca said:

- It works on Firefox, Safari, Chrome, and IE 7 and 8
- It does NOT work on IE6 :)

Just that.

It is, however, a 2-level menu, and not a 3 level one.

Regards,

Paulo Tavares

Thanks everyone,

That's the behavior i'm trying to implement, but just for the third level,
I´ve already have the 2 first levels implemented with the intelliwarp, so  i'll try to integrate the drop down functionality, from that drop down menu in my application.

King regards, keep that good Work


Hi everyone,

I found online this drop downmenu on Javascript  and I made some changes to adapt it to my needs, now i want to integrate it on a Second level of an intelliwarp menu, like in the example that i first presented, it would be usefull some help.
thanks

greetings

Hi Admilson,

If you want to go down that route, you do need to know your way through Javascript, CSS and HTML.

The way to do it simply, in the Agile Platform, would be through Unescaped Expressions (Expressions with the "Escape Content" property set to off), and write the HTML you want, intertwined with Service Studio's Link widgets.

That's the best suggestion I can give you.

Also, you'll have to add the javascript file you've attached to the eSpace's resources - or copy and paste its content to the Menu webblock Javascript.

Regards,

Paulo Tavares