I’m building a basic UI which has a menu bar along the top of the screen, built within a horizontal box for even distribution. When I click on one of the buttons, it’s going to open a submenu in the top left, exactly under the menu bar.
What I’m looking for help with is if there’s a way to attach/position/anchor the submenu (preferably in the UI editor rather than at runtime) to the bottom of the menu bar. This would be preferable to manually placing the UI and will mean that I don’t need to update the submenus any time I want to resize the menu bar.
One way to do this is probably to have a second slot in the top-level container – the top could be a vertical list, within which you put your horizontal menu bar. Each menu item would then be told about this additional slot where they spawn their menus.
Black is the menu bar and blue is the submenu. The submenu doesn’t line up with the bar at all, in terms of layout. Can your suggestion handle this case?
If the top layout is a Canvas container then you can place any number of child widgets of that container any way you want. I don’t know if this counts as “making one a child” or not, but that’s what you’d have to do.
You would have to manually transfer the left and bottom of your menu bar item to the left and top coordinates of your open menu, unless you want to use the multibox or popup menu support that’s already in there.
I see. Just so I’m clear, what you’re saying is to have the menu bar and all the sub menus in same widget file with all the sub menus hidden, already positioned in the right spot, and then just show/hide them as needed?
It would be MUCH easier to just create a widget that covers the whole screen as you are thinking, but its short sided in terms of usability.
You can shift the x/y of the spawn point programmatically based on the button click. Just save the mouse chords and send them along to the process you use to spawn the next widget.
you need to make an exception for leading and trailing buttons, so that their ancor is set differently than the middle.
Also, before you get too far ahead, you need to think of the UI in OOP terms.
Its not 4 buttons across the top, its 10^n buttons across the top.
Its not button 1 on click function, its ButtonX click function (where x is unknown by us, but known to the button when its clicked).
Otherwise, the moment you have to do something silly like implement joypad support you’ll have to start your UI from near scratch.
In your example with the “awsome” artwork, you can do that by having the button itself decide what new widget class it will spawn (also how you make exceptions for leading and trailing buttons).
It can get pretty complex to set it right, but once you do it’ll work on anything no matter the resolution (mobile included).
I 100% agree and it’s what I’m trying to do, which is the point of the original question. I want to dynamically spawn another widget that contain that menu and I want it to be attached/placed in the right position.
You do not need to pre-create the menus; they can be separate widgets if you want to. What you need to do is make sure that the parent of your menu bar is a Canvas layout component, and when the user clicks the menu bar item, you instantiate (or show) the menu and attach it inside the parent of the menu bar, at the appropriate location. The Canvas parent of the menu bar should ideally cover the entire screen, to make it easy for the menus to do the same.
Separately, again: Consider the support that’s already in UMG/Slate for popup menus. It may make your life easier.
Slate is like learning another programming language, so I won’t be touching that, but for UMG popups, a quick search turned up this page. Is this what you’re talking about or there something else you had in mind?
Id just code it. The info you want (x/y and button size) is avaliable on the button.
pass it along with the function call you make whennits clicked and use it in the widget you spawn.
Spawn position is button position.
1/2 Width is to adjust menu to be flush with button
Definitely.
you can change the coordinates of the widget component like you do inside the interface via code.
as well as the width, height, and nearly all other parameters.
Create a master widget, shove any component like canvas inside, go to the blueprint graph and drag the canvas in it.
when you drag off you get all the options you want.
The goal is to connect custom variables to it in a construction script, and or a custom event function.
then call the custom event function at runtime when the button is clicked…
Build it so that everyone you make for the sub menu is derived by the same widget class.
Maybe, make it so it contains another widget class you define by Name, so that you can actually build widget parts and replace them as needed in the main interface while calling to the same sub class to provide you with the spawn functions.
So in other words. Yea there is no built in option.
make your own function and call it.
