Leaderboard

This project is discontinued, consider using NativeUI instead. Bare-bones menu script. Installing: Put basicmenu into your server's client_packages directory, then you can add const whatever = require("basicmenu"); to the clientside scripts that you want to add a menu. Example code explains this better. Properties & Functions: BasicMenu title | Get & Set | Title of the menu. (string) x | Get & Set | X position of the menu. (float) y | Get & Set | Y position of the menu. (float) items | Get & Set | An array containing all items of the menu. (MenuItem array) hoverItem | Get & Set | Index of the item you're hovering on with your cursor, -1 if not hovering on anything. (int) visible | Get & Set | Visibility of the menu. (bool) disableESC | Get & Set | Allow/disallow menu from being closed by pressing ESC key. (bool) titleFont | Get & Set | Font ID of the title. (int) titleColor | Get & Set | Text color of the title. (array containing rgba) itemsPerPage | Get & Set | How many items are visible on a page of the menu. (int) currentPage | Get & Set | Current page of the menu. (int) setBanner(lib, banner) | Sets the menu's banner to another texture, setBanner("shopui_title_carmod", "shopui_title_carmod") will set the menu banner to be Los Santos Customs one for example. MenuItem title | Get & Set | Title of the item. (string) disabled | Get & Set | Whether the item is able to be selected or not. (bool) textColor | Get & Set | Color of the item's title. (array containing rgba) bgColor | Get & Set | Color of the item's background. (array containing rgba) icon | Get & Set | ID of the item's icon. (int) font | Get & Set | Font ID of the title. (int) outline | Get & Set | Outline of the item. (bool) shadow | Get & Set | Shadow of the item. (bool) rightText | Get & Set | Right text of the item. (string) Icon IDs: You can put icons to menu items (even though there are only 3 options) if you want to. Just do myMenuItem.icon = desired icon ID. MenuItemIcons.None (0) = No icon MenuItemIcons.Lock (1) = Lock icon MenuItemIcons.Tick (2) = Tick/checkmark icon Events: There are three events, see example for how to use them. OnMenuItemSelected(menu, selectedMenuItem, selectedMenuItemIndex) /* Will be called when a menu item is clicked on/selected. menu - The menu that contained the selected item. (BasicMenu) selectedMenuItem - The menu item that was selected. (MenuItem) selectedMenuItemIndex - Index of the menu item on the selected menu. (int) */ OnMenuPageChanged(menu, oldPage, newPage) /* Will be called when a menu's page is changed. menu - The menu that had a page change. (BasicMenu) oldPage - Old page. (int) newPage - New page. (int) */ OnMenuClosed(menu) /* Will be called when a menu is closed. menu - The menu that was closed. (BasicMenu) */ Controls: Hovering on an item and left clicking - select item ESC - close menu (if disableESC isn't set to true) Left Arrow - previous page Right Arrow - next page Example Script: const menuLib = require("basicmenu"); // Creating a menu // you can just do: let exampleMenu = new menuLib.BasicMenu("Test Menu", 0.5, 0.4); let exampleMenu = new menuLib.BasicMenu("Test Menu", 0.5, 0.4, "commonmenu", "interaction_bgd", { itemSelected: function(item, itemIndex) { mp.gui.chat.push(`MenuEvent(${this.title}) - itemSelected: ${item.title} - ${itemIndex}`); }, pageChanged: function(oldPage, newPage) { mp.gui.chat.push(`MenuEvent(${this.title}) - pageChanged: ${oldPage} to ${newPage}`); }, closed: function() { mp.gui.chat.push(`MenuEvent(${this.title}) - close`); } }); exampleMenu.itemsPerPage = 5; // make the menu show 5 items per page, this is default by 10 let normalItem = new menuLib.MenuItem("Normal Item"); normalItem.rightText = "Free"; exampleMenu.items.push(normalItem); let redBackground = new menuLib.MenuItem("Red Background Item", [255, 255, 255, 255], [255, 0, 0, 200]); redBackground.rightText = "~g~$500"; exampleMenu.items.push(redBackground); let greenText = new menuLib.MenuItem("Green Text Item", [0, 255, 0, 255]); exampleMenu.items.push(greenText); // You won't be able to click on disabled items. let disabledItem = new menuLib.MenuItem("Disabled Item"); disabledItem.disabled = true; exampleMenu.items.push(disabledItem); let itemWithIcon = new menuLib.MenuItem("Item with Icon", [255, 255, 255, 255], [0, 0, 0, 200], function() { mp.gui.chat.push("You selected the item with icon, why?"); }); itemWithIcon.icon = menuLib.MenuItemIcons.Tick; itemWithIcon.rightText = "Pretty cool"; exampleMenu.items.push(itemWithIcon); let disabledWithIcon = new menuLib.MenuItem("Top Secret"); disabledWithIcon.disabled = true; disabledWithIcon.icon = menuLib.MenuItemIcons.Lock; exampleMenu.items.push(disabledWithIcon); // You can disable ESC menu closing by using disableESC property. exampleMenu.disableESC = true; // This is important as menus are not visible by default. exampleMenu.visible = true; // Events // OnMenuItemSelected, will be called when a menu item is clicked on. mp.events.add("OnMenuItemSelected", (menu, selectedItem, selectedItemIndex) => { mp.gui.chat.push(`Item selected on menu (${menu.title}) - ${selectedItem.title} (Index: ${selectedItemIndex})`); }); // OnMenuPageChanged, will be called when a menu's current page changes. mp.events.add("OnMenuPageChanged", (menu, oldPage, newPage) => { mp.gui.chat.push(`Menu page changed (${menu.title}) - ${oldPage} to ${newPage}`); }); // OnMenuClosed, will be called when a menu item is closed. mp.events.add("OnMenuClosed", (menu) => { mp.gui.chat.push(`Menu closed (${menu.title})`); }); // F6 key will toggle the visibility of exampleMenu mp.keys.bind(0x75, false, () => { exampleMenu.visible = !exampleMenu.visible; });