How to Make a Dropdown Menu

Материал из Поле цифровой дидактики

Шаблон:About

Файл: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#makethis"forthisspriteonly"

Make two custom blocks:

open
close

Coding

Make this code: Шаблон:Tip

whenclickedsetchosento0setpositiontoclosedgotox:...y:...settowhateverpositionwantedsetsizeto...%settowhateverwantedswitchcostumetoclosedforeveriftouchingmousepointer?andmousedown?thenifposition=openthenclosewaituntilnotmousedownendifposition=closedthenopenwaituntilnotmousedownendenddefinecloseifposition=openthenswitchcostumetoclosedbroadcastcloseenddefineopenifposition=closedthenswitchcostumetoopensetclone#to0repeat3changeclone#by1createcloneofmyselfendchangeclone#by1endwhenIstartasacloneifclone#=1thenswitchcostumetooption1glide0.2secstox:...y:...theinstructionsforwhattofillinhereareabove,markedasatipelseifclone#=2thenswitchcostumetooption2glide0.2secstox:...y:...theinstructionsforwhattofillinhereareabove,markedasatipelseifclone#=3thenswitchcostumetooption3glide0.2secstox:...y:...theinstructionsforwhattofillinhereareabove,markedasatipelsedeletethiscloneendendendsetpositiontoopenwhenIreceivecloseifclone#=1thenglide0.2secstox:...y:...here,settotheoriginalposition(thestartingpositionofthesprite)deletethiscloneelseifclone#=2thenglide0.2secstox:...y:...here,settotheoriginalposition(thestartingpositionofthesprite)deletethiscloneelseifclone#=3thenglide0.2secstox:...y:...here,settotheoriginalposition(thestartingpositionofthesprite)deletethiscloneelsedeletethiscloneendendendsetpositiontoclosedsetclone#to0whenIstartasaclonewait0.2secondsiftouchingmousepointer?thensetghosteffectto20ifmousedown?thenifclone#=1thensetchosento1broadcastcloseelseifclone#=2thensetchosento2broadcastcloseelseifclone#=3thensetchosento3broadcastcloseelsedeletethiscloneendendendendelsesetghosteffectto0endwhenclickediftouchingmousepointer?thensetghosteffectto20elsesetghosteffectto0end

Example Project

The following is an example project.