I created a module for a drop down effect. When you click on a button, the contents of the button will tween down. If you open another dropdown button, the previous one will close and then the button will open.
Here is a video: Click Here! (May 23, 2024)
To Get the Module: Click Here! (June 8, 2024)
YouTube Demo: Click Here! (May 27, 2024)
There are two customizable number values on the module. There is DropDownSpace which is how far apart you would like the buttons to be placed! Please alter this to your need. The second number value is TweenTime, this is the number value on how long it takes the buttons to move.
Step By Step On How To Use It:
Step 1: Get the module off of the link provided.
Step 2: Put the module into the game. Place in any location you would like!
Step 3: Create two folders, one will be used to store your dropdown buttons, and one will be used to store the contents of the dropdown frame.
Step 4: Create all of the dropdown buttons. Then, inside of the DropDown contents folder, make a Folder for each DropDown button and name it THE SAME as the DropDown button it is paired with! Now, make your DropDown contents buttons, make sure to put them inside of the correct Folder. Name each of these dropdown content buttons with 1 NUMBER in the name, also ensure that each buttons number is numerical. Example: Content1, Content2, … ect. Unacceptable: djwuidj239dwj23dj, has more than one set of numbers, and is not numerical and does not have a reasonable number!
Image For Confusion
Step 5: Position the buttons inside of the content folder at the same Y.Scale value as the dropdown button. Make sure that these buttons are hidden, so if needed, change the ZIndex of the dropdown button.
For confustion, you can paste this in your command tab!
local dropDownFolder = -- Put the location of the folder here
local dropDownContentFolder = -- Put location of the folder here
for _, x: TextButton in ipairs(dropDownFolder:GetChildren()) do
x.ZIndex = 2
for _, y: TextButton in ipairs(lessonFolder:FindFirstChild(x.Name):GetChildren()) do
y.ZIndex = 1
y.Position = UDim2.new(y.Position.X.Scale, 0, x.Position.Y.Scale, 0)
end
end
Step 6: First, require the module. Second, get both the dropDown folder and the DropDown Content folder. The first parameter is the DropDown folder, and the second is the DropDown contents folder.
Example of LocalScript Code:
local CreateDropDown = require(script.Parent.Parent.Parent.HandleDropDownMenu)
local dropDownFolder = script.Parent.DropDowns
local lessonFolder = script.Parent.Lessons
CreateDropDown(dropDownFolder, lessonFolder)
EXTRAS (Extra editions): There are two other parameters you can use in the module script! However, these do not need to be used! The two parameters are named: autoClose and moveOthers. autoClose is a boolean that can only be set to true and false, setting autoClose to true will have the other dropdown close when another is clicked; whereas, if it is set to false it will keep them open, allowing you to have multiple open! Without using this, the generic will act if it is set to true.
The second new parameter moveOthers is a table, where you will store other elements to be moved with the drop down effect, ensuring they will be moved out of the way! You can use two sets of Folders, it will loop through the first folder and find GuiObjects there and will search through a second table for GuiObjects, but no third table will work!. You can also use a specific type of 1 GuiObject! You could even use the collection service and add it to a table and have it work like that!
Example Requiring Module Code
local CreateDropDown = require(script.Parent.Parent.Parent.HandleDropDownMenu)
local dropDownFolder = script.Parent.DropDowns
local lessonFolder = script.Parent.Lessons
local parentA = script.Parent.Parent.Parent
local frame = parentA.Frame
local frame2 = parentA.Frame2
CreateDropDown(dropDownFolder, lessonFolder, false, {frame, frame2})
Example of Using Collection Service, with requiring the module (toMove: parameter)
local CreateDropDown = require(script.Parent.Parent.Parent.HandleDropDownMenu)
local dropDownFolder = script.Parent.DropDowns
local lessonFolder = script.Parent.Lessons
local otherTween = {}
local cs = game:GetService("CollectionService")
local tag = "ToMove"
for _, x in ipairs(cs:GetTagged(tag)) do
if x:IsA("GuiObject") then
table.insert(otherTween, x)
end
end
CreateDropDown(dropDownFolder, lessonFolder, true, otherTween)
This edition, adds to the flow and way the module looks and makes it look better. There two things and one is Clickability an Attribute, this Attribute is a boolean attribute, meaning true or false, so you can use it to check if the buttons inside of the DropDown buttons content folders. This is used to make sure players can click through the button to activate it or double tap quick enough for it to be clicked. *Clickability is set to false, as soon as the button is clicked to close it. It will be set to true, when the tween is completely finished, it will not be able to be used until all the way done!
Example in Code
lesson1.Content1.MouseButton1Click:Connect(function()
if lesson1.Content1:GetAttribute("Clickable") == false then return end
makeAllInvis()
end)
OR
lesson1.Content1.MouseButton1Click:Connect(function()
if lesson1.Content1:GetAttribute("Clickable") then -- understood true
makeAllInvis()
end
end)
Second, the UI enhancement. To show that the dropdown is open, we use identifiers > and ↓. Both mean two different things, > is used for it being closed, and ↓ is open. To use this, you will need to include > in the text portion of the dropdown button. This only works if you have the ‘>’ in the title!
NEW: (June 8th 2024)
There is a 5th parameter! This parameters name is ADVANCED_SETTINGS, in this parameter, you can change the TweenTime, DropDownSpace, EasingDirection, and EasingStyle. More could be added, recommend any if you want them to be added.
- Why is there the
TweenTimeandDropDownSpaceagain, isn’t it already at the top, used before?
Yes, it is, you would use this in case of creating MULTIPLE dropdowns, and wanting them to be spaced differently or be tweened faster.
Now, for EasingDirection and EasingStyle allows YOU to change the way it is animated!
- So, how do I use this?
Well first you create a table, and inside of the table, you need to have [“TweenTime”] = to your value, not all are needed in there, you can only change one if you would like! All the other ones have the same capitals, and spelling as the matching ones.
- Can I see this in code, so it all makes sense?
Yes, of course! (This table is what you would put inside of the required portion!
local advancedSettings = {
["TweenTime"] = 0.1,
["DropDownSpace"] = 0,
["EasingDirection"] = Enum.EasingDirection.In,
["EasingStyle"] = Enum.EasingStyle.Quad
}
Updated New Segment of Requiring!
local CreateDropDown = require(script.Parent.Parent.Parent.HandleDropDownMenu)
local dropDownFolder = script.Parent.DropDowns
local lessonFolder = script.Parent.Lessons
local otherTween = {}
local cs = game:GetService("CollectionService")
local tag = "ToMove"
for _, x in ipairs(cs:GetTagged(tag)) do
if x:IsA("GuiObject") then
table.insert(otherTween, x)
end
end
local advancedSettings = {
["TweenTime"] = 0.1,
["DropDownSpace"] = 0,
["EasingDirection"] = Enum.EasingDirection.In,
["EasingStyle"] = Enum.EasingStyle.Quad
}
CreateDropDown(dropDownFolder, lessonFolder, true, otherTween, advancedSettings)
Without using this, here are the defult values:
-
TweenTimeis equal whatever the number value is childed to the module -
DropDownSpaceis equal whatever the number value is childed to the module -
EasingDirection= Enum.EasingDirection.In -
EasingStyle= Enum.EasingStyle.Linear
All of these defult values are set in the module script! Any questions about this update, please leave below!
UPDATE 4! 5/30/24:
I found an issue with the spacing inbetween the main dropdown button and its first button being not equal to the other buttons spaced between each other!
This update ensures that there will be no weird gaps within the buttons no matter the sizes of the buttons! (To fix this issue please remove the ModuleScript from the game, then go back into models and put it back into the same spot with the same name, and everything should be fixed!)
Please leave feedback, on ways it can improve, on other things I can add, or just any comments! For any confusion, you can also reply to this! Also, if you notice any bugs please report them here, but if you have not received the latest bug update, then re-install it into your game!
LAST BUG UPDATE: 6/8/24 1:00 AM (EST)
Please understand, this is a very early version of this, and many things will be added, and many updates! Video will only get updated if there are so many updates, or a huge update!