[Release] ActionMenu [1.0.1] (Updated April 2018)

[WolfKnight179]

ActionMenu

ActionMenu is a html/js based quick select style menu, it consists of a group of buttons that can each be set to perform a different task, many other communities have this, like DOJ and SOE, but none of them are public.

I noticed other members of the community trying to create a menu like this, however I felt like they lacked some form of automation. New buttons and sub-menus can easily be added, without the need of modifying the JavaScript, or adding more code. All of the code files included in this resource have been commented thoroughly to make it easy for you to understand.

IF YOUR BUTTONS DO NOT WORK, MAKE SURE YOU HAVE NOT RENAMED THE RESOURCE, OR CHANGE THE RESOURCE NAME ON LINE 117 OF ui.js

This is an example resource, which you must add to in order for it to become usable in your server/gamemode. It is recommended that you only use this if you have experience with Lua and HTML.

Press ‘Z’ (ID: 20) by default to open the menu.

How to add a new button

To add a new button, use the following template, and place the button inside the mainmenu div, or a sub-menu div in the ui.html file:

<button class="menuoption" data-action="buttonaction">Button Name</button>

The Button Name is what the text that will display on the button, and the data-action is what the NUI Callback receives when you click the button. You must make sure that all buttons you add have the menuoption class, otherwise they will not work. So say I wanted to add a hands up button, I would put:

<button class="menuoption" data-action="handsup">Put Hands Up</button>

How to add a new sub-menu

To add a new sub-menu, use the following template, and place the div inside of the actionmenu div in of the ui.html file:

<div id="submenuname" data-parent="mainmenu" style="display: none;">
    <!-- buttons -->
</div>

If you look inside of the ui.html file, you will see how I’ve set up the sub-menus. In order for a sub-menu to be opened, you must set up a button with a data-sub attribute, that is equal to the ID of the sub-menu div.

Download

Click here to download [1.0.1]
Click here to download [1.0.0]

Installation

1. Download the latest version above
2. Extract the wk_actionmenu folder from the .zip file into your resources folder
3. Add ‘start wk_actionmenu’ into your server.cfg

Changelog

Version 1.0.1
- Fixed buttons overflowing off the screen
- Localised the font file
- Gave the buttons a graphical update
- Pressing ESC when the menu is open now closes it
- Added a " >>" indicator to help identify submenus
- Back and Exit buttons now get automatically generated for every submenu

Version 1.0.0
- Initial release

License

I give full permission for anyone to modify and re-upload this resource, the only thing that I ask is that I be credited in the upload.

Credits

Me - writing the script and making it do cool shit.
@lowheartrate - I used some of his work as a base
@Briglair - Helping with a few issues on @lowheartrate’s post
@TheStonedTurtle - Helping me with the JavaScript side

[fenton]

This is exactly what I’ve been waiting for. Thank you!

[Sonda88]

Is it possible to add this script with VRP? How to add VRP commands like handcuff only for the police, revive for ems and other things?

[WolfKnight179]

You’ll have to do it yourself. You could use a data attribute such as data-require, and send the state of the player to the JS side.

[SheriaCraft]

do u know the code for the action to be able to spawn a car ?

[TheStonedTurtle]

I haz butons but they click does nothing with them. Plz halp

[RYoung]

Could I link a command with one of the buttons? (command that already exists on my server)

[WolfKnight179]

You need to set up the buttons and the NUI callbacks.

[rhys19]

looked on fivem wiki and there is an action to enable engine can i use this in this?

[N0am]

the example resource doesnt work

[WolfKnight179]

It works absolutely fine. What is your issue?

[Cosharek]

works good my dude ;D THANK U

[SWood]

I got it installed and the menu comes up but i cannot exit out of the menu. My keyboard will not work at all when the menu is activated and I pretty much have to ctrl+alt+del to get out of the game.

[Decon]

Amazing job on the menu!
Couple of suggestions if you plan on updating this:

1. You should probably implement a “Back” button. It would be very useful for someone creating multiple sub-menus inside a main menu, that or a “Home” button.

I added a “home” button for the time being to the sub menus, basically all it does is hit your “ResetMenu” function.

<button onclick="ResetMenu()">Home</button>

2. Add A Wait after button pressed. For some reason, after I clicked one of the buttons other than the EXIT button, the menu always hid itself, even though the ToggleActionMenu() function was still called after each button press, it never actually toggled it, only Hid itself. Must be a timing issue.

I added a wait after the button press and then it stayed active. Not sure if that was intended, assumed it wasn’t based on your commented text. Just a minor thing anyways. Then again, maybe that was only happening for me and no one else. Either way, that solved my problem there.

RegisterNUICallback( "ButtonClick", function( data, cb ) 
	if ( data == "button1" ) then 
		chatPrint( "Button 1 pressed!" )
	elseif ( data == "button2" ) then 
		chatPrint( "Button 2 pressed!" )
	elseif ( data == "button3" ) then 
		chatPrint( "Button 3 pressed!" )
	elseif ( data == "button4" ) then 
		chatPrint( "Button 4 pressed!" )
	elseif ( data == "exit" ) then 
		-- We toggle the ActionMenu and return here, otherwise the function 
		-- call below would be executed too, which would just open the menu again 
		ToggleActionMenu()
		return 
	end 

	-- This will only be called if any button other than the exit button is pressed
	Citizen.Wait( 0 ) --Added Wait Here  <-----
	ToggleActionMenu()
end )

[N0am]

Buttons wont do anything they wont write in chat or close the menu

[MJRamon]

Can you give an example on how to send data to JS (and show or hide elements based on data)?

Also, yes, “Back” button is almost a must have.

[WolfKnight179]

@SWood press ‘ESC’ or click the ‘EXIT’ button.

@Decon You have some good suggestions, I’ll take a look when I next have some time.

@NoamKvet Have you modified any of the files? If so send me your modifications. Also, what FX build are you on?

@MJRamon You should take a look at this guide.

[How-To] Use NUI (UI Creation with HTML)

Hey guys, because some of you guys have got some questions like: “I want to create an UI in Game to create a cool Login or whatever”, I decide to spend some time for you to write this Tutorial. I’m not an English person so be gentle if I do some grammar mistakes !!!IMPORTEND!!! This Tutorial is not for ppl who did not know what is scripting or for absolute beginners, because I’m not going into every detail! So you need exp. in the following: LUA HTML CSS Javascript (or better jQue…

You send data from Lua to the JS side using SendNUIMessage, take a look at the ui.js file in the ActionMenu resource, there’s a function called init(), which loops through all of the HTML buttons, checks if they have a data-action attribute, then assigns them a click function, which is just the sendData function, but with the button’s data-action.

[N0am]

@WolfKnight179 latest fx no modification

[WolfKnight179]

Download a fresh copy of FXServer with just this resource in it, if it works, then one of your other resources is conflicting.

[Scott_UK]

I have a fresh install of Latest FX, the only resource is wk_actionmenu and when I press “Z” nothing happens.