[Paid] QWERTYDev_Menu

qwerty_dev_menu

QWERTYDev_Menu is a NUI based menu system with scroll wheel and search functionality, and triggers client events based on the element selected!

This menu was designed from the ground up to be compatibly with multiple resolutions, no weird displays on different resolutions! This menu is the perfect tool for creating menu’s that are easy to navigate while having many elements. Because of the scroll functionality you can have as many elements as you need, and each element can store its own data which makes it perfect for situations where data needs to be transferred through the menu! You can find showcases for 1080p displays & 1440p displays below!

Features:

  • You can refine the menu by using the search feature to allow you to find the option you want faster!
  • You can scroll through the menu allowing lots of entries into the menu!
  • You can store as much data as required in each of the menu elements which is passed to the event that is triggered!
  • You can change the colour of menu when you create the menu, or use the standard colours!
  • You can customize the title of the menu as well as the text on each element!
  • Designed to work with multiple different resolutions!
  • Designed to adjust the menu’s width based on the length of the title & element names!

Usage:
You call the client event, QWERTYDev_Menu, for example: TriggerEvent(‘QWERTYDev_Menu:ShowMenu’, mData) where mData is a table containing all the data for the menu. An example configuration can be found in the files as well!

1080p: QWERTYDev_Menu - 1080p Showcase on Vimeo

1440p: QWERTYDev_Menu - 1440p Showcase on Vimeo

Disclaimer: This resource does use the Escrow system, however all the js, html & css files are not encrypted & the menu’s featured in the showcase are included in a unencrypted file as a guide. If you require any further customization, please reach out and will will work together! Debug is also enabled by default, to disable set debug to false in the config.lua file

Tebex: https://qwertydev5m.tebex.io/package/4793182 $10.00 AUD ~ $7 USD (Originally $15 AUD ~ $11 USD)

2 Likes

Price dropped from $15 AUD ~ $11 USD to $10 AUD ~ $7 USD

Changelogs for 1.1:

  • Added the ability to exit the menu when you press Escape
  • Added the command “QWERTYDev_Menu:ForceClose” to force the menu to close (Needs to be entered in F8)
  • Added the ability to add premade menus to the config file that can be opened by a command or keypress, you can also have it bound to a command and not a keypress but you cannot just have it bound to a keypress

An example configuration of a menu bound to a command / keypress can be found below, if you have any questions feel free to ask!

[1] = {
command = “MenuTest3”,
control = “z”,
menudata = {
[“menuname”] = “QWERTYDev_Menu”,
[“colors”] = {
backgroundcolor = “#00447cb6”,
secondarycolor = “#007ac1”,
primaryhover = “#006097”,
scrolltrack = “#006097b6
},
[“menuelements”] = {
[“option1”] = {
name = “Option A”,
event = “option:a”,
data = {
option = “A”
}
},
[“option2”] = {
name = “Option B”,
event = “option:b”,
data = {
option = “B”
}
},
[“option3”] = {
name = “Option C”,
event = “option:c”,
data = {
option = “C”
}
},
[“option4”] = {
name = “Option D”,
event = “option:d”,
data = {
option = “D”
}
},
[“option5”] = {
name = “Option E”,
event = “option:e”,
data = {
option = “E”
}
},
[“option6”] = {
name = “Option F”,
event = “option:f”,
data = {
option = “F”
}
},
[“option7”] = {
name = “Option G”,
event = “option:f”,
data = {
option = “G”,
info = “You can store any table for each element of the menu making it usable for many cases!”
}
},
[“option8”] = {
name = “Option H”,
event = “option:f”,
data = {
option = “H”
}
},
[“option9”] = {
name = “Option I”,
event = “option:f”,
data = {
option = “I”,
info = “You can customise the colors of the menu & the text on each menu!”
}
},
[“option10”] = {
name = “Option J”,
event = “option:f”,
data = {
option = “J”,
info = “You can have as many elements in the table as you need!”
}
}
}
}
}

Changelogs for 1.2:

  • Added the ability to have elements so to a sub menu instead of triggering a event, please see showcase below for additional information. So you can create as many sub menu’s as needed for the menu, further increasing the use cases of the menu!

Showcase:
QWERTYDev_Menu - 1.2 Showcase on Vimeo

Please note, some of the console prints are not present in 1.2 that are featured in the showcase.

Example configuration:

local mData = {

    menudata = {
        ["menuname"]        = "QWERTYDev_Menu",
        ["colors"]         = {
            backgroundcolor = "#00447cb6",
            secondarycolor  = "#007ac1",
            primaryhover    = "#006097",
            scrolltrack     = "#006097b6"
        },
        ["menuelements"]   = {
            ["option1"] = {
                name       = "Option A",
                event      = "option:a",
                data       = {
                    option = "A"
                }
            },
            ["option2"] = {
                name       = "Option B",
                event      = "option:b",
                data       = {
                    option = "B"
                }
            },
            ["option3"] = {
                name       = "Option C",
                event      = "option:c",
                data       = {
                    option = "C"
                }
            },

            ["option4"] = {
                name       = "Option D",
                event      = "option:d",
                data       = {
                    option = "D"
                }
            },

            ["option5"] = {
                name       = "Option E",
                event      = "option:e",
                data       = {
                    option = "E"
                }
            },

            ["option6"] = {
                name       = "Option F",
                event      = "option:f",
                data       = {
                    option = "F"
                }
            },

            ["option7"] = {
                name       = "Option G",
                event      = "option:f",
                submenu    = {
                    ["option1"] = {
                        name       = "Option A [1]",
                        event      = "option:f",
                        data       = {
                            option = "G:A"
                        }
                    },
                    ["option2"] = {
                        name       = "Option B [1]",
                        event      = "option:f",
                        data       = {
                            option = "G:B"
                        }
                    },
                    ["option3"] = {
                        name       = "Option C [1]",
                        event      = "option:f",
                        data       = {
                            option = "G:C"
                        }
                    },
                    ["option4"] = {
                        name       = "Option D [1]",
                        event      = "option:f",
                        submenu    = {
                            ["option1"] = {
                                name       = "Option A [2]",
                                event      = "option:",
                                data       = {
                                    option = "G:D:A"
                                }
                            },
                            ["option2"] = {
                                name       = "Option B [2]",
                                event      = "option:b",
                                data       = {
                                    option = "G:D:B"
                                }
                            },
                            ["option3"] = {
                                name       = "Option C [2]",
                                event      = "option:c",
                                data       = {
                                    option = "G:D:C"
                                }
                            }
                        }
                    }
                }
            },
            ["option8"] = {
                name       = "Option H",
                event      = "option:f",
                data       = {
                    option = "H"
                }
            },
            ["option9"] = {
                name       = "Option I",
                event      = "option:f",
                data       = {
                    option = "I",
                    info = "You can customise the colors of the menu & the text on each menu!"
                }
            },
            ["option10"] = {
                name       = "Option J",
                event      = "option:f",
                data       = {
                    option = "J",
                    info = "You can have as many elements in the table as you need!"
                }
            }
        }
    }
}

TriggerEvent('QWERTYDev_Menu:ShowMenu', mData)

Changelogs for 1.3:

  • Changed they way menus are registered so they now show up in order instead of jumbled!

An example configuration can be found below, all previous configurations will not work, however you can easily transfer menus to the new setup!

Example Configuration:
menudata = {
[“menuname”] = “QWERTYDev_Menu”,
[“colors”] = {
backgroundcolor = “#00447cb6”,
secondarycolor = “#007ac1”,
primaryhover = “#006097”,
scrolltrack = “#006097b6
},
[“menuelements”] = {
{
name = “Option A”,
event = “option:a”,
data = {
option = “A”
}
},
{
name = “Option B”,
event = “option:b”,
data = {
option = “B”
}
},
{
name = “Option C”,
event = “option:c”,
data = {
option = “C”
}
},
{
name = “Option D”,
event = “option:d”,
data = {
option = “D”
}
},
{
name = “Option E”,
event = “option:e”,
data = {
option = “E”
}
},
{
name = “Option F”,
event = “option:f”,
data = {
option = “F”
}
},
{
name = “Option G”,
event = “option:f”,
submenu = {
{
name = “Option A [1]”,
event = “option:f”,
data = {
option = “G:A”
}
},
{
name = “Option B [1]”,
event = “option:f”,
data = {
option = “G:B”
}
},
{
name = “Option C [1]”,
event = “option:f”,
data = {
option = “G:C”
}
},
{
name = “Option D [1]”,
event = “option:f”,
submenu = {
{
name = “Option A [2]”,
event = “option:”,
data = {
option = “G:D:A”
}
},
{
name = “Option B [2]”,
event = “option:b”,
data = {
option = “G:D:B”
}
},
{
name = “Option C [2]”,
event = “option:c”,
data = {
option = “G:D:C”
}
}
}
}
}
},
{
name = “Option H”,
event = “option:f”,
data = {
option = “H”
}
},
{
name = “Option I”,
event = “option:f”,
data = {
option = “I”,
info = “You can customise the colors of the menu & the text on each menu!”
}
},
{
name = “Option J”,
event = “option:f”,
data = {
option = “J”,
info = “You can have as many elements in the table as you need!”
}
}
}
}

If you have any suggestion feel free to ask them to be included in future updates and i will do my best to include them!

Changelogs for 1.3.1:

  • Fixed issues with large menus showing incorrectly

Major functionality update!

Changelogs for 1.4:

  • Added the ability to now create menu’s through events and exports! This means you can get the data from the menu in the same place where you call the menu, instead of through messy exports!
  • Fixed a few visual bugs that occurred with 1.3
  • Added checks to see if any menus are currently open, if a menu is open a new menu cannot be opened
  • Added command MenuTest4 in Client.lua as a example on how to use the menu with exports

Example use with exports below:

RegisterCommand(‘MenuTest4’, function()

local mdata = {
    menudata = {
        ["menuname"]        = "QWERTYDev_Menu",
        ["colors"]         = {
            backgroundcolor = "#00447cb6",
            secondarycolor  = "#007ac1",
            primaryhover    = "#006097",
            scrolltrack     = "#006097b6"
        },
        ["menuelements"]   = {
            {
                name       = "Option A",
                event      = "option:a",
                data       = {
                    option = "A"
                }
            },
            {
                name       = "Option B",
                event      = "option:b",
                data       = {
                    option = "B"
                }
            },
            {
                name       = "Option C",
                event      = "option:c",
                data       = {
                    option = "C"
                }
            },
            {
                name       = "Option D",
                event      = "option:d",
                data       = {
                    option = "D"
                }
            },
            {
                name       = "Option E",
                event      = "option:e",
                data       = {
                    option = "E"
                }
            },
            {
                name       = "Option F",
                event      = "option:f",
                data       = {
                    option = "F"
                }
            },
            {
                name       = "Option G",
                event      = "option:f",
                submenu    = {
                    {
                        name       = "Option A [1]",
                        event      = "option:f",
                        data       = {
                            option = "G:A"
                        }
                    },
                    {
                        name       = "Option B [1]",
                        event      = "option:f",
                        data       = {
                            option = "G:B"
                        }
                    },
                    {
                        name       = "Option C [1]",
                        event      = "option:f",
                        data       = {
                            option = "G:C"
                        }
                    },
                    {
                        name       = "Option D [1]",
                        event      = "option:f",
                        submenu    = {
                            {
                                name       = "Option A [2]",
                                event      = "option:",
                                data       = {
                                    option = "G:D:A"
                                }
                            },
                            {
                                name       = "Option B [2]",
                                event      = "option:b",
                                data       = {
                                    option = "G:D:B"
                                }
                            },
                            {
                                name       = "Option C [2]",
                                event      = "option:c",
                                data       = {
                                    option = "G:D:C"
                                }
                            }
                        }
                    }
                }
            },
            {
                name       = "Option H",
                event      = "option:f",
                data       = {
                    option = "H"
                }
            },
            {
                name       = "Option I",
                event      = "option:f",
                data       = {
                    option = "I",
                    info = "You can customise the colors of the menu & the text on each menu!"
                }
            },
            {
                name       = "Option J",
                event      = "option:f",
                data       = {
                    option = "J",
                    info = "You can have as many elements in the table as you need!"
                }
            }
        }
    }
}
local Response = exports["QWERTYDev_Menu"]:CreateMenu(mdata)
while Response == nil do
    Wait(50)
end
print(json.encode(Response))
end)

If you would like to see anything added, or require any support please message me :slight_smile: