How to Make a 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
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
