Drop Down Menu Top item not a link

Drop Down Menu Top item not a link

  

Hi,

I'd like to create a drop down menu, but I don't want the top menu item to be a link.

I've tried to simply convert the link to a label or expression, but the style gets messed up.

Is there an easy way to do this?

eg. I want:

Top Menu 1

  • Sub Menu 1
  • Sub Menu 2

When I click "Top Menu 1", I just want the drop down to display without linking to another screen.

Thanks

Hi,

To add sub menus to a DropDownMenu widget, just add links in the MenuSubItems area. No need to remove the link of the MenuItem (TopMenu) menu.

The link in the TopMenu will be ignored.

Remember to add the class attribute to extended properties in order to check if the link is the one "active".

Cheers,
Eduardo Jauch

Solution

Why not use the built-in accelerator to create sub menu?


First, create the top menu as usual (by dragging submenu screen to menu block or menu bar in layout).

If your menu bar is hidden, and a hamburger icon is shown instead, click Desktop and Tablet Preview first.

Change Caption and ID to Top Menu


Double click menu layout to open Menu webblock, and click on RichWidgets\DropDownMenu


Then click Show All Placeholder icon (see in screenshot below):

Now drag your submenu screen to the white space below your desired Top Menu:


Hope it helps...

Solution

The accelerator is good, Harlin.

But it's important to understand how the menu works.
Most of the applications I saw have very "customized" menus and an architecture that makes it very difficult to use it.

Cheers,
Eduardo Jauch

Agreed.

But sometimes client want that customized and fancy menu :(

Is there any way to always show the submenu items even if you are not on the page?
I try adding the classes in runtime that Outsystems use to open a submenu.
But Outsystems javascript always override my classes..

Niels Favreau wrote:

Is there any way to always show the submenu items even if you are not on the page?
I try adding the classes in runtime that Outsystems use to open a submenu.
But Outsystems javascript always override my classes..

Oh yes, of course there is.
And there is nothing related to JavaScript in the menus.

You can change the Menu IsActive (of DropDownMenu) to True (instead of an expression that will evaluate if the InputParameter is the same as the menu. But than you will need to change the way you define which is the active menu...

By the way, why do you need this? 

Cheers
Eduardo Jauch

P.S.

Before getting crucified, let me say that if you want to keep all the menus opened all the time, just set the right CSS, as what the code does is to change it when clicked. If you change the classes, probably the code will not be able to find anything.

Or, even better, instead trying to change the behaviour of the existing menu, kust set a new menu that do not use the DropDown menu.

It will be a lot easier to keep it working.

Cheers,

Eduardo Jauch

Hello,

Thanks. I just played around with the 'IsActigveMenu' input parameter.
And what i meant by javascript behavior was, I tried to add the 'Open' class to the menu. (It's the class Outsystems append when you open the menu to show the submenus)

But for some reason Outsystems removed my 'Open' class when i tried to add it manually. (I debugged)

But your option is much cleaner and much easier. Stupid of me I didn't thought of your solution

Hi Niels,

Your approach is not stupid. It's the most obvious.
The problem is that as it involves "effectively" JavaScript, simply "add/remove" classes would probably not solve the problem, as the classes are given and taken dynamically (JavaScript).

To solve it, you would have to open the DropDownMenu widget, to understand how it knows where to change, know if it was necessary to remove listeners, etc.

And in the end, you would have something that simply didn't work.

So, in this case, and by your requirements, doing something from scratch seems to be better.

Cheers,
Eduardo Jauch

Harlin Setiadarma wrote:

Agreed.

But sometimes client want that customized and fancy menu :(


HI Harlin,

 I want to ask is that way I can't click on the "TOP MENU" link to the top menu page? 

Because i Have create this Hardware and have a drop sown menu, and the Hardware should link the to Hardware page, But I can't.  Do I did something wrong? 

Thank you

Hello Eva. This is the normal behaviour. 

The DropDownMenu widget has java script to detect that the menu has a sub menu, and captures the click in the link to open the submenu instead of navigating to a page.

The easiest way to solve this is to include a submenu to go to Hardware.

You can try to clone the Drop Down menu to change its behavior, or create a menu by yourself that does not use the DropDownMenu widget.

I advice to use the first approach, as it is much easier to implement.

Cheers.

Eduardo Jauch is right...

If you click on Hardware, it will just open sub menu.

THANKS EDUARDO & HARLIN :)