- This article is about how to create a dropdown menu in a project. For the block input, see Dropdown Menu.
Making a dropdown menu can be useful for making an animated selection for a project. These can be any shape, size, or color but the coding is the same. This tutorial will teach how to make a dropdown menu.
Setup
To start, create a sprite. Draw a costume however the dropdown is wanted. Here is an example:
Name this costume "closed". Now, duplicate the costume and flip the arrow. Now it should be looking like this:
Now, make more costumes, each one being an option to choose. Create variables called
(position)
(chosen)
(clone #)//make this "for this sprite only"
Make two custom blocks:
open::custom
close::custom
Coding
Make this code:
 Tip: | Experiment with different lengths with gliding. Starting with the height of the costume multiplied by two is recommended. Remember make the number is negative so it goes down. Make sure the values are the same. |
when gf clicked
set [chosen v] to [0]
set [position v] to [closed]
go to x:(. . .::grey) y:(. . .::grey) //set to whatever position wanted
set size to (. . .::grey) % //set to whatever wanted
switch costume to (closed v)
forever
if <<touching (mouse pointer v)?> and <mouse down?>> then
if <(position)=[open]> then
close::custom
wait until <not <mouse down>>
end
if <(position)=[closed]> then
open::custom
wait until <not <mouse down>>
end
end
define close
if <(position)=[open]> then
switch costume to (closed v)
broadcast (close v)
end
define open
if <(position)=[closed]> then
switch costume to (open v)
set [clone # v] to [0]
repeat [3]
change [clone # v] by [1]
create clone of (myself v)
end
change [clone # v] by [1]
end
when I start as a clone
if <(clone #) = [1]> then
switch costume to (option 1 v)
glide [0.2] secs to x:(. . .::grey) y:(. . .::grey)//the instructions for what to fill in here are above, marked as a tip
else
if <(clone #) = [2]> then
switch costume to (option 2 v)
glide [0.2] secs to x:(. . .::grey) y:(. . .::grey)//the instructions for what to fill in here are above, marked as a tip
else
if <(clone #) = [3]> then
switch costume to (option 3 v)
glide [0.2] secs to x:(. . .::grey) y:(. . .::grey)//the instructions for what to fill in here are above, marked as a tip
else
delete this clone
end
end
end
set [position v] to [open]
when I receive [close v]
if <(clone #) = [1]> then
glide [0.2] secs to x:(. . .::grey) y:(. . .::grey)//here, set to the original position (the starting position of the sprite)
delete this clone
else
if <(clone #) = [2]> then
glide [0.2] secs to x:(. . .::grey) y:(. . .::grey)//here, set to the original position (the starting position of the sprite)
delete this clone
else
if <(clone #) = [3]> then
glide [0.2] secs to x:(. . .::grey) y:(. . .::grey)//here, set to the original position (the starting position of the sprite)
delete this clone
else
delete this clone
end
end
end
set [position v] to [closed]
set [clone # v] to [0]
when I start as a clone
wait [0.2] seconds
if <touching (mouse pointer v)?> then
set [ghost v] effect to [20]
if <mouse down?> then
if <(clone #) = [1]> then
set [chosen v] to [1]
broadcast (close v)
else
if <(clone #) = [2]> then
set [chosen v] to [2]
broadcast (close v)
else
if <(clone #) = [3]> then
set [chosen v] to [3]
broadcast (close v)
else
delete this clone
end
end
end
end
else
set [ghost v] effect to [0]
end
when gf clicked
if <touching (mouse pointer v)?> then
set [ghost v] effect to [20]
else
set [ghost v] effect to [0]
end
Example Project
The following is an example project.
- Dropdown Menu Template on Scratch
