Просмотр кода страницы How to Make a Dropdown Menu

{{about|how to create a dropdown menu in a [[project]]|the block input|Dropdown Menu}}
[[File:Open-dropdown-menu-full.png|200px|thumb|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:
[[File:Dropdown-closed-image.svg|thumb|left|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:
[[File:Open-dropdown-menu.svg|thumb|left|The top of an open dropdown menu]]
Now, make more costumes, each one being an option to choose. Create variables called
<scratchblocks>(position)</scratchblocks> 
<scratchblocks>(chosen)</scratchblocks> 
<scratchblocks>(clone #)//make this "for this sprite only"</scratchblocks> 
Make two custom blocks: 
<scratchblocks>open::custom</scratchblocks> <scratchblocks>close::custom</scratchblocks>

== 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.}}
<scratchblocks>
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
</scratchblocks>

== Example Project ==
The following is an example project.
* [[projects:549348205|Dropdown Menu Template]] on Scratch

[[Category:Scripting Tutorials]]