How to Make a Dropdown Menu

Файл:Open-dropdown-menu-full.png

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:

Файл:Dropdown-closed-image.svg

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:

Файл:Open-dropdown-menu.svg

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: Шаблон: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