This article is about how to create a dropdown menu in a project. For the block input, see Dropdown Menu.
A full, open 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:

Example of a closed dropdown menu

Name this costume "closed". Now, duplicate the costume and flip the arrow. Now it should be looking like this:

The top of an open dropdown menu

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:

Note 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.

Cookies help us deliver our services. By using our services, you agree to our use of cookies.