[Release] MenuV - Standalone NUI menu for FiveM (v1.4), docs added!

TigoDEV · November 25, 2020, 8:55pm

MenuV | Standalone Menu for FiveM | NUI Menu Library (v1.4)

MenuV is a library written for FiveM and only uses NUI functionalities. This library allows you to create menus in FiveM. This project is open-source and you must respect the license and the hard work.

Features

Support for simple buttons, sliders, checkboxes, lists and confirms
Support for emojis on items
Support for custom colors (RGB)
Support for all screen resolutions.
Support for all screen positions.
Support for native sound effects.
Support for two themes: default and native
Item descriptions
Rebindable keys
Event-based callbacks
Uses 2 msec while menu open and idle.
Banner YTD support
FX Version: cerulean
Colour support like: ^1 or ~r~ etc.

How to use?

Add start menuv to your server.cfg before the resources that’s uses menuv
To use MenuV you must add @menuv/menuv.lua in your fxmanifest.lua file.
```
client_scripts {
   '@menuv/menuv.lua',
   'example.lua'
}
```

Create a menu

Create a menu by calling the MenuV:CreateMenu function.

MenuV:CreateMenu(title: string, subtitle: string, position: string, red: number, green: number, blue: number, size: string, texture: string, dictionary: string)

Example:

local menu = MenuV:CreateMenu(false, 'Welcome to MenuV', 'topleft', 255, 0, 0, 'size-125', 'example', 'menuv', 'default')

Create menu items

Create a item by calling AddButton, AddConfirm, AddRange, AddCheckbox or AddSlider in the created menu

/** CREATE A BUTTON */
menu:AddButton({ icon: string, label: string, description: string, value: any, disabled: boolean });

/** CREATE A CONFIRM */
menu:AddConfirm({ icon: string, label: string, description: string, value: boolean, disabled: boolean });

/** CREATE A RANGE */
menu:AddRange({ icon: string, label: string, description: string, value: number, min: number, max: number, disabled: boolean });

/** CREATE A CHECKBOX */
menu:AddCheckbox({ icon: string, label: string, description: string, value: boolean, disabled: boolean });

/** CREATE A SLIDER */
menu:AddSlider({ icon: string, label: string, description: string, value: number, values: [] { label: string, value: any, description: string }, disabled: boolean });

To see example in practice, see example.lua

Documentation

Read MenuV documentation

License

Project is written by ThymonA and published under GNU General Public License v3.0 Read License

Download

Latest Version

Versions

v1.4
v1.3
v1.2
v1.1
v1.0

Links

~~Documentation~~
GitHub Releases
GitHub Project
GitHub README.md
Previous Screenshot

Screenshot

Default Theme

Native Theme

If you experience issues, you can report them as an issue on GitHub | Report Issue.

Written by:
ThymonA // Tigo

GitHub: ThymonA
FiveM Forum: TigoDEV

SlimDaddy · November 25, 2020, 9:55pm

Hardcore is your middle name. OOP in lua

TigoDEV · November 25, 2020, 10:18pm

It also makes extending and maintaining a script easier. Thank you for the compliment .

Snippy_Development · November 25, 2020, 10:36pm

Aye! This is a nice, new, sleek system!

mkcx · November 26, 2020, 1:46am

This is really dope.

CozyCloud · November 26, 2020, 9:33am

Such amazing timing to release this. Is it possible to use a custom ytd/png banner as the header for the menu?

TigoDEV · November 26, 2020, 10:08am

Not yet, I’m going to work on it.

strianodev · November 26, 2020, 10:50am

Amazing as you! Thanks for share!

TigoDEV · November 26, 2020, 2:20pm

In the next release banner support will be available.

Hugoshao · November 27, 2020, 6:05am

Great interface, is there any way to create sub-menus?

TigoDEV · November 27, 2020, 8:43am

There are no “submenus”, however you can use any created menu in another menu.

local menu = MenuV:CreateMenu('MenuV', 'Welcome to MenuV', 'topleft', 255, 0, 0)
local submenu = MenuV:CreateMenu('Submenu?', 'Welcome to MenuV', 'topleft', 255, 0, 0)

menu:AddButton({ icon = '😃', label = 'Open Submenu', value = submenu, description = 'Open menu called submenu' })

By using any menu as value inside a Button, MenuV automatically opened that menu when user pressed “ENTER”.

WaltzyMatilda · November 27, 2020, 9:47am

This is a sleek looking Menu, Thank you!

Knight_Marshal · November 27, 2020, 12:01pm

Very nice.

Hugoshao · November 28, 2020, 9:31am

Hello ~ how to show the menu ?

TigoDEV · November 28, 2020, 11:37am

You can do

local menu = MenuV:CreateMenu('MenuV', 'Welcome to MenuV', 'topleft', 255, 0, 0)

menu:Open()

--- or

MenuV:OpenMenu(menu)

Hugoshao · November 28, 2020, 11:40am

thank you , Very good project, hope to experience the background board function earlier

Hugoshao · November 28, 2020, 11:48am

Hi, I used this code, it correctly print test and test2, but the menu is not displayed


local assert = assert
local MenuV = assert(MenuV)


local menu = MenuV:CreateMenu('MenuV', 'Welcome to MenuV', 'topleft', 255, 0, 0)
local menu2 = MenuV:CreateMenu('Demo 2', 'Open this demo menu in MenuV', 'topleft', 255, 0, 0)

local menu_button = menu:AddButton({ icon = '😃', label = 'Open Demo 2 Menu', value = menu2, description = 'YEA :D from first menu' })
local menu2_button = menu2:AddButton({ icon = '😃', label = 'Open First Menu', value = menu, description = 'YEA :D from second menu' })
local confirm = menu:AddConfirm({ icon = '🔥', label = 'Confirm', value = 'no' })
local range = menu:AddRange({ icon = '⚽', label = 'Range Item', min = 0, max = 10, value = 0, saveOnUpdate = true })
local checkbox = menu:AddCheckbox({ icon = '💡', label = 'Checkbox Item', value = 'n' })
local slider = menu:AddSlider({ icon = '❤️', label = 'Slider', value = 'demo', values = {
    { label = 'Demo Item', value = 'demo', description = 'Demo Item 1' },
    { label = 'Demo Item 2', value = 'demo2', description = 'Demo Item 2' },
    { label = 'Demo Item 3', value = 'demo3', description = 'Demo Item 3' },
    { label = 'Demo Item 4', value = 'demo4', description = 'Demo Item 4' }
}})

--- Events
confirm:On('confirm', function(item) print('YOU ACCEPTED THE TERMS') end)
confirm:On('deny', function(item) print('YOU DENIED THE TERMS') end)

range:On('select', function(item, value) print(('FROM %s to %s YOU SELECTED %s'):format(item.Min, item.Max, value)) end)
range:On('change', function(item, newValue, oldValue)
    menu.Title = ('MenuV %s'):format(newValue)
end)

slider:On('select', function(item, value) print(('YOU SELECTED %s'):format(value)) end)

confirm:On('enter', function(item) print('YOU HAVE NOW A CONFIRM ACTIVE') end)
confirm:On('leave', function(item) print('YOU LEFT OUR CONFIRM :(') end)

menu:On('switch', function(item, currentItem, prevItem) print(('YOU HAVE SWITCH THE ITEMS FROM %s TO %s'):format(prevItem.__type, currentItem.__type)) end)

menu2:On('open', function(m)
    m:ClearItems()

    for i = 1, 10, 1 do
        math.randomseed(GetGameTimer() + i)

        m:AddButton({ ignoreUpdate = i ~= 10, icon = '❤️', label = ('Open Menu %s'):format(math.random(0, 1000)), value = menu, description = ('YEA! ANOTHER RANDOM NUMBER: %s'):format(math.random(0, 1000)), select = function(i) print('YOU CLICKED ON THIS ITEM!!!!') end })
    end
end)

menu()

RegisterCommand("menutest", function(source, args, fullCommand)
    print ("test")
    MenuV:OpenMenu(menu)
    print ("test2")
end, false)

TigoDEV · November 28, 2020, 1:19pm

I think you forgot to add menuv to your server.cfg

start menuv

Add that before the resources that’s uses menuv. I tried your code and it worked fine for me.

Hugoshao · November 28, 2020, 4:59pm

No, I started MenuV correctly, because I can see the case settings of MenuV in the button settings

TigoDEV · November 28, 2020, 5:21pm

I executed your code without changes and had 0 problems, for now your issues is not reproducible