Can someone send me version when looks like that ?
, i really like to try make nicer look
yes please love that
You can find the code is in the original reply
i did copy and paste ur code but now the menu wont pop up just the mouse please help.
Loving it !
3 Likes
can you please help to get mine to work
can you please help to get mine to work
If you only copy and paste you will never learn my friend.
1 Like
i have tried everything
i have got the icons i get the mouse pointer but no menu
Anyway to yet create a menu inside a menu?
Level 1 - Emotes button for example which then goes to level 2
Level 2 Emotes - Has the emote buttons?
How you do that?
How do you connect ESX?
Can you give me a little hint, please?
Many peoples wait implement this function. We need submenus 
i just need a working menu
- extract radialmenu (dont rename folder) to resource folder
- add radialmenu to server.cfg
- change key for radial menu in config.lua keybind =“F6” (default F6)
start server and enjoy
You can easily implement submenus by getting creative with the Lua file and adding your own commands to show the different submenus.
radialmenu.lua
-- Menu state
local showMenu = false
-- Keybind Lookup table
local keybindControls = {
["ESC"] = 322, ["F1"] = 288, ["F2"] = 289, ["F3"] = 170, ["F5"] = 166, ["F6"] = 167, ["F7"] = 168, ["F8"] = 169, ["F9"] = 56, ["F10"] = 57, ["~"] = 243, ["1"] = 157, ["2"] = 158, ["3"] = 160, ["4"] = 164, ["5"] = 165, ["6"] = 159, ["7"] = 161, ["8"] = 162, ["9"] = 163, ["-"] = 84, ["="] = 83, ["BACKSPACE"] = 177, ["TAB"] = 37, ["Q"] = 44, ["W"] = 32, ["E"] = 38, ["R"] = 45, ["T"] = 245, ["Y"] = 246, ["U"] = 303, ["P"] = 199, ["["] = 39, ["]"] = 40, ["ENTER"] = 18, ["CAPS"] = 137, ["A"] = 34, ["S"] = 8, ["D"] = 9, ["F"] = 23, ["G"] = 47, ["H"] = 74, ["K"] = 311, ["L"] = 182, ["LEFTSHIFT"] = 21, ["Z"] = 20, ["X"] = 73, ["C"] = 26, ["V"] = 0, ["B"] = 29, ["N"] = 249, ["M"] = 244, [","] = 82, ["."] = 81, ["LEFTCTRL"] = 36, ["LEFTALT"] = 19, ["SPACE"] = 22, ["RIGHTCTRL"] = 70, ["HOME"] = 213, ["PAGEUP"] = 10, ["PAGEDOWN"] = 11, ["DELETE"] = 178, ["LEFT"] = 174, ["RIGHT"] = 175, ["TOP"] = 27, ["DOWN"] = 173, ["NENTER"] = 201, ["N4"] = 108, ["N5"] = 60, ["N6"] = 107, ["N+"] = 96, ["N-"] = 97, ["N7"] = 117, ["N8"] = 61, ["N9"] = 118
}
-- Main thread
Citizen.CreateThread(function()
-- Update every frame
while true do
Citizen.Wait(0)
-- Loop through all menus in config
for _, menuConfig in pairs(menuConfigs) do
-- Check if menu should be enabled
if menuConfig:enableMenu() then
-- When keybind is pressed toggle UI
local keybindControl = keybindControls[menuConfig.data.keybind]
if IsControlPressed(0, keybindControl) then
-- Init UI
showMenu = true
SendNUIMessage({
type = 'init',
data = menuConfig.data,
resourceName = GetCurrentResourceName()
})
-- Set cursor position and set focus
SetCursorLocation(0.5, 0.5)
SetNuiFocus(true, true)
-- Play sound
PlaySoundFrontend(-1, "NAV", "HUD_AMMO_SHOP_SOUNDSET", 1)
-- Prevent menu from showing again until key is released
while showMenu == true do Citizen.Wait(100) end
Citizen.Wait(100)
while IsControlPressed(0, keybindControl) do Citizen.Wait(100) end
end
end
end
end
end)
RegisterCommand("submenu1", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu1"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu2", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu2"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu3", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu3"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu4", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu4"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
RegisterCommand("submenu5", function(source, args, rawCommand)
-- Wait for next frame just to be safe
Citizen.Wait(0)
-- Init UI and set focus
showMenu = true
SendNUIMessage({
type = 'init',
data = subMenuConfigs["submenu5"].data,
resourceName = GetCurrentResourceName()
})
SetNuiFocus(true, true)
end, false)
-- Callback function for closing menu
RegisterNUICallback('closemenu', function(data, cb)
-- Clear focus and destroy UI
showMenu = false
SetNuiFocus(false, false)
SendNUIMessage({
type = 'destroy'
})
-- Play sound
PlaySoundFrontend(-1, "NAV", "HUD_AMMO_SHOP_SOUNDSET", 1)
-- Send ACK to callback function
cb('ok')
end)
-- Callback function for when a slice is clicked, execute command
RegisterNUICallback('sliceclicked', function(data, cb)
-- Clear focus and destroy UI
showMenu = false
SetNuiFocus(false, false)
SendNUIMessage({
type = 'destroy'
})
-- Play sound
PlaySoundFrontend(-1, "NAV", "HUD_AMMO_SHOP_SOUNDSET", 1)
-- Run command
ExecuteCommand(data.command)
-- Send ACK to callback function
cb('ok')
end)
config.lua
-- Menu configuration, array of menus to display
menuConfigs = {
['menu'] = {
enableMenu = function()
return true
end,
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
}
}
}
}
}
-- Submenu configuration
subMenuConfigs = {
['submenu1'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 270,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu1_a", "submenu1_b", "submenu1_c", "submenu1_d", "submenu1_e"},
commands = {"submenu1_a", "submenu1_b", "submenu1_c", "submenu1_d", "submenu1_e"}
}
}
}
},
['submenu2'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu2_a", "submenu2_b", "submenu2_c", "submenu2_d", "submenu2_e", "submenu2_f", "submenu2_g", "submenu2_h", "submenu2_i", "submenu2_j"},
commands = {"submenu2_a", "submenu2_b", "submenu2_c", "submenu2_d", "submenu2_e", "submenu2_f", "submenu2_g", "submenu2_h", "submenu2_i", "submenu2_j"}
}
}
}
},
['submenu3'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu3_a", "submenu3_b", "submenu3_c", "submenu3_d", "submenu3_e", "submenu3_f", "submenu3_g", "submenu3_h", "submenu3_i", "submenu3_j"},
commands = {"submenu3_a", "submenu3_b", "submenu3_c", "submenu3_d", "submenu3_e", "submenu3_f", "submenu3_g", "submenu3_h", "submenu3_i", "submenu3_j"}
}
}
}
},
['submenu4'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu4_a", "submenu4_b", "submenu4_c", "submenu4_d", "submenu4_e", "submenu4_f", "submenu4_g", "submenu4_h", "submenu4_i", "submenu4_j"},
commands = {"submenu4_a", "submenu4_b", "submenu4_c", "submenu4_d", "submenu4_e", "submenu4_f", "submenu4_g", "submenu4_h", "submenu4_i", "submenu4_j"}
}
}
}
},
['submenu5'] = {
data = {
keybind = "F6",
style = {
sizePx = 600,
slices = {
default = { ['fill'] = '#000000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.60 },
hover = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 },
selected = { ['fill'] = '#ff8000', ['stroke'] = '#000000', ['stroke-width'] = 3, ['opacity'] = 0.80 }
},
titles = {
default = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
hover = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' },
selected = { ['fill'] = '#ffffff', ['stroke'] = 'none', ['font'] = 'Helvetica', ['font-size'] = 16, ['font-weight'] = 'bold' }
},
icons = {
width = 64,
height = 64
}
},
wheels = {
{
navAngle = 270,
minRadiusPercent = 0.25,
maxRadiusPercent = 0.55,
labels = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"},
commands = {"submenu1", "submenu2", "submenu3", "submenu4", "submenu5"}
},
{
navAngle = 288,
minRadiusPercent = 0.6,
maxRadiusPercent = 0.9,
labels = {"submenu5_a", "submenu5_b", "submenu5_c", "submenu5_d", "submenu5_e", "submenu5_f", "submenu5_g", "submenu5_h", "submenu5_i", "submenu5_j"},
commands = {"submenu5_a", "submenu5_b", "submenu5_c", "submenu5_d", "submenu5_e", "submenu5_f", "submenu5_g", "submenu5_h", "submenu5_i", "submenu5_j"}
}
}
}
},
}
18 Likes
Can you give us the screenshot? thanks
someone can tell me how i can make command to back i mean back to main menu + use phone
hello would it be possible to do the same thing with / drag [id] / cuff [id]
A cool feature would be if the player could pick his own fav animations. Like a chat command /emotemenu (emote number, emote, emotename) or something in that order and then have a personal wheel for the Individual player
1 Like
Continuing the discussion from [Release] RadialMenu - Configurable menu for chat commands using Wheelnav.js (UPDATED):
hello i got error when i add submenu and not working the vehicle menu
can you fix it?