[Cody8295]





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 If

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

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 Sub

Usage:

Code

Expand(-,-,-,-)

Replace '-' with heights.

[0dayleet]

Great tutorial, I already have an idea of what I could do with it.
Thanks.

[Cody8295]

Great tutorial, I already have an idea of what I could do with it.
Thanks.

Lol, yea. You can create a lot of fun things with this. Thanks for the feedback.

[Fake.]

Now put it into a function/subroutine so you can easily use it in other projects. It's all about portability :)

[Thermal™]

Very well written tutorial, and I'm not going to lie that's a pretty sick concept as well as a outcome.
Keep the tutorials / work coming bud.

[Oxycodone]

I think nathan posted this already for 08 tho.

[xIMrMilksIx]

this looks pretty useful! I'm pretty new to all this and that was a very helpful and easy to follow TUT.

[DaRkReD]

I think nathan posted this already for 08 tho.

They are the same languages. Different ide.

[Fake.]

I think nathan posted this already for 08 tho.

Yeah he did, right here: https://hackforums.net/showthread.php?tid=220586
The image of the source is gone, though.

They are the same languages. Different ide.

You can take advantage of the .NET Framework 4.0 in VS2010.

[Cody8295]

I think nathan posted this already for 08 tho.

If he did, I didn't see it. Anyways, thank you everyone for the feedback.

[versx]

Holy shit this is sweet! Thanks for sharing, I remember seeing something like this a long time ago but it was poorly made.

[Cody8295]

Holy shit this is sweet! Thanks for sharing, I remember seeing something like this a long time ago but it was poorly made.

Lol, you're welcome. And thank you very much for the feedback!

[xBroak]

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 Sub

Usage:

Code

Expand(-,-,-,-)

Replace '-' with heights.

[SIM-135152]

good one thanks
i maybe use it soon
:D thanks

[Cody8295]

Usage:

Code

Expand(-,-,-,-)

Replace '-' with heights.

Cool, thanks for this. Really nice.