In this tutorial I will show you how to make a very simple animated drop down menu.
Note: This is in VB.NET
Here is what the final solution will look like:
![[Image: Uwjjr.gif]](https://i.imgur.com/Uwjjr.gif)
1.) Create a new project and give it a name.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/9238c78f-b316-4870-ad87-cbb6ccefaa93/2011-01-18_2206.png[/img]
2.)Put 1 button and 1 panel on your form however you want. I made the panel right under the button so it looks nice and gives a good animation.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/4ec006f4-0fa9-42d3-bcd9-669c3593609a/2011-01-18_2213.png[/img]
3.)Make some stuff in your menu. Could be text, buttons, images, anything. I just made some text for the example.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/818ff1a8-1d42-4069-b0b7-114b46d27ecd/2011-01-18_2215.png[/img]
4.) Double click on the button to goto the code. The code for the button is this (with explanation in comments):
5.) Resize your controls to the size you want them to be when the menu is closed.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/0d6a93dd-36a7-4879-acd1-8b296b2973dc/2011-01-18_2229.png[/img]
6.) You are done! Debug and check it out!
Thank you for reading this tutorial.
You may use this code without giving credits.
Thanks to xBroak, for making this function...
Usage:
Replace '-' with heights.
Simple Animated Drop Down Menu
In this tutorial I will show you how to make a very simple animated drop down menu.
Note: This is in VB.NET
Here is what the final solution will look like:
1.) Create a new project and give it a name.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/9238c78f-b316-4870-ad87-cbb6ccefaa93/2011-01-18_2206.png[/img]
2.)Put 1 button and 1 panel on your form however you want. I made the panel right under the button so it looks nice and gives a good animation.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/4ec006f4-0fa9-42d3-bcd9-669c3593609a/2011-01-18_2213.png[/img]
3.)Make some stuff in your menu. Could be text, buttons, images, anything. I just made some text for the example.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/818ff1a8-1d42-4069-b0b7-114b46d27ecd/2011-01-18_2215.png[/img]
4.) Double click on the button to goto the code. The code for the button is this (with explanation in comments):
Code
' Code and tutorial by Cody8295
If Panel1.Visible = True Then ' Checks if panel1 is visible, if it is, run the code below.
Button1.Text = "Open Menu" ' Changes the text on the button to "Open Menu" because we are closing it.
While Panel1.Height > 2 ' Run the code below while panel1's height is greater than 2.
' The reason I changed the height to 2 is because I want the panel's height to be 2 when it is closed.
Panel1.Size = New Size(Panel1.Width, Panel1.Height - 1) ' Subtract panel1's height by 1 each time.
End While ' Don't run the above code anymore!
While Me.Height > 65 ' Run the code below while the form's (me) height is greating than 65.
' Again, the reason I changed the form's height to 65, is because that's how big it will be when the menu is closed.
Me.Size = New Size(Me.Width, Me.Height - 2) ' Subtract the form's height by 1 each time.
End While ' Don't run the above code anymore!
Panel1.Visible = False ' Make panel1 invisible.
Else ' If panel1 isn't visible, forget the above code and run the code below.
Button1.Text = "Close Menu" ' The rest is the same as above almost, so I wont explain it as much.
While Panel1.Height < 245 ' Instead of 245, make it the size of your panel.
Panel1.Size = New Size(Panel1.Width, Panel1.Height + 1)
End While
While Me.Height < 321 ' Instead of 321, make it the size of your form.
Me.Size = New Size(Me.Width, Me.Height + 2)
End While
Panel1.Visible = True
End If5.) Resize your controls to the size you want them to be when the menu is closed.
[img]http://content.screencast.com/users/codydv/folders/Jing/media/0d6a93dd-36a7-4879-acd1-8b296b2973dc/2011-01-18_2229.png[/img]
6.) You are done! Debug and check it out!
Thank you for reading this tutorial.
You may use this code without giving credits.
Thanks to xBroak, for making this function...
Code
Public Sub Expand(ByVal Height1 As String, ByVal Height2 As String, ByVal Height3 As String, ByVal Height4 As String)
If Panel1.Visible = True Then
While Panel1.Height > Height1
Panel1.Size = New Size(Panel1.Width, Panel1.Height - 1)
End While
While Me.Height > Height2
Me.Size = New Size(Me.Width, Me.Height - 2)
End While
Panel1.Visible = False
Else
While Panel1.Height < Height3
Panel1.Size = New Size(Panel1.Width, Panel1.Height + 1)
End While
While Me.Height < Height4
Me.Size = New Size(Me.Width, Me.Height + 2)
End While
Panel1.Visible = True
End If
End SubUsage:
Code
Expand(-,-,-,-)Replace '-' with heights.