With the help of @syko, we decided to release this “menu-maker” to the public, and is a dominant menu creation tool we use in the server we develop, Amplify RP
This release is for making NUI menu’s fairly painlessly. I never have been a fan of the GTA-O like arrow menu’s, so I felt the need to make a way to create a resource that is not hard coded lists in individual resources, and that can be used together with other resources effortlessly. You can send full tables of data as the values which are encoded into base64 to ensure stringifying the table does not break the menu. It is then decoded from base64 upon selection to provide a proper value. You have full mouse control for selection, due to being NUI based. With FontAwesome stylesheet attached, when creating your menu’s, you can customize them to also inherit icons prepended to the labels if you wish, adding more style. The menu provides an “accordian” style submenu list to mask your submenu’s until the submenu title is hovered.
This resource will allow the building of 3 different kinds of menu’s.
List Menu w/ Submenu Ability
Hover Menu W/ Submenu Ability
“Checkbox” Like Menu
I have added some detail about how to create your own menu’s, with pre-built tests for each type. We hope this resource serves good purpose for your community.
@BIA_Yozza The below should work for you, unfortunately the menu doesn’t return the label so if the ‘apartments:server:CreateApartment’ event truly relies on it, you may need to re-write it.
function apartments()
local myListMenu = {
menutype = "list",
menulabel = "Apartment",
showBack = false,
menu = {
{label = 'South Rockford Drive', value = 'apartment1'},
{label = 'Morningwood Blvd', value = 'apartment2'},
{label = 'Integrity Way', value = 'apartment3'},
{label = 'Tinsel Towers', value = 'apartment4'},
{label = 'Fantastic Plaza', value = 'apartment5'}
}
}
TriggerEvent("amp-uimenu:createMenu", myListMenu, function(value)
if not value then return end
if value then
TriggerServerEvent('apartments:server:CreateApartment', value)
end
end)
end
You could also just make the value an object of any needed data, if the label is required. Something like this would transfer the label and the value in an object for each menu element.
function apartments()
local myListMenu = {
menutype = "list",
menulabel = "Apartment",
showBack = false,
menu = {
{label = 'South Rockford Drive', value = {label = 'South Rockford Drive', value = 'apartment1'}},
{label = 'Morningwood Blvd', value = {label = 'Morningwood Blvd', value = 'apartment2'}},
{label = 'Integrity Way', value = {label = 'Integrity Way', value = 'apartment3'}},
{label = 'Tinsel Towers', value = {label = 'Tinsel Towers', value = 'apartment4'}},
{label = 'Fantastic Plaza', value = {label = 'Fantastic Plaza', value = 'apartment5'}}
}
}
TriggerEvent("amp-uimenu:createMenu", myListMenu, function(data)
if not data then return end
TriggerServerEvent('apartments:server:CreateApartment', data.label, data.value)
end)
end
So i got this setup and it opens a menu but if i click on any option it just closes the menu and dusnt do the option. What didt i do wrong in here?
local civmenu = {
menutype = "hover",
menulabel = "Test Civ",
event = "pa:hover", -- the event name you wish to trigger when hovering over an item in the list
showBack = true,
menu = {
{label = "Kneel", value ="/k"},
{label = "Lie Down", value ="/l"},
{label = "Sit", value ="/s"},
{label = "Option 4", value ="option4"},
{label = "Option 6", value ="option6"},
{label = "Option 7", value ="option7"},
{label = "Option 8", value ="option8"},
}
}
RegisterCommand("civtest", function()
TriggerEvent("amp-uimenu:createMenu", civmenu, function(value)
print(value) -- this is the value selected from within the hover menu.
end)
end)```
Are you attempting to Execute a corresponding command such as /k, /l or /s? If so, you could replace print(value)
with ExecuteCommand(value)
And remove the / for the values within the menu and the command would execute. Simply printing a value provides no interaction, you would simply see the value in your F8 console.
Search for a icon you wish to use(Greyed out icons cannot be used unless premuim), and once found, you will see its icon link
IE <i class="fas fa-door-open"></i>
You would simply copy the fas fa-door-open portion and use it for the icon link.
This is a great resource, however I can’t seem to be able to get the ‘back’ functionality to work at all. For some reason by the time the callback function is run when clicking on the back button, it appears to do nothing and the menu closes. Has anyone run into this issue?
Is it possible to add icons to the submenu headings? I tried just adding the icon string in front like for regular menu items but that did not appear to work?