[Release] NUI Interaction Menu

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.

  1. List Menu w/ Submenu Ability
  2. Hover Menu W/ Submenu Ability
  3. “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.

Resource Download:
amp-uimenu.rar (4.3 KB)

Here are the menu’s in action.

List Menu & Checklist Menu:

Hover Menu

List Menu (With alot of data):

11 Likes

btw great release @Xilophinum

Hey man

just a quick question anychance of you showing me how you went about using your menu for something like this? how esx does theres thanks.

function apartments()
    esx.UI.Menu.CloseAll()
    esx.UI.Menu.Open('default', GetCurrentResourceName(), 'cakamsizlere',
    {
        title    = 'Apartment',
        align    = 'left',
        elements = {
            {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'}
            
        }
    },function(data, menu)
        local itemName = data.current.value
        local namediyor = data.current.label
        local closestPlayer, closestDistance = esx.Game.GetClosestPlayer()
        if data.current.value == 'apartment1' then
            TriggerServerEvent('apartments:server:CreateApartment', itemName, namediyor)
            menu.close()
        elseif data.current.value == 'apartment2' then
            print(namediyor)
            TriggerServerEvent('apartments:server:CreateApartment', itemName,namediyor)
            menu.close()
        elseif data.current.value == 'apartment3' then  
            TriggerServerEvent('apartments:server:CreateApartment', itemName, namediyor)
            menu.close()
        elseif data.current.value == 'apartment4' then  
            TriggerServerEvent('apartments:server:CreateApartment', itemName, namediyor)
            menu.close()
        elseif data.current.value == 'apartment5' then  
            TriggerServerEvent('apartments:server:CreateApartment', itemName, namediyor)
            menu.close()
    
        end
    end,function(data, menu)
        menu.close()
    end)
end

@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
1 Like

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
1 Like

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.

Thank you, Also where wud i go about finding these icons?

icon = “fas fa-door-open”,

FontAwesome

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.

1 Like

what is the script of vehicle shop? Thanks.

We tend to make our own stuff, the script is custom.

Fixed an issue with not encoding the multi select menu, as well as faulty icon swapping for checklist menu’s. OP updated link

2 Likes

t1ger cardealer I believe :smiley: