Ball Menu Design

Show and Tell
1

Hey all,

I made a nifty little menu design that I thought I’d share. Its a pretty simple but decent design. A gif of this design in action can be found here.

And here is the code for it:

<App Theme="Basic" Background="#363F45">
<Panel>
    <Image ux:Name="menuButton" File="Icons/plus.png" Height="20%" Width="20%">  
        <Clicked>
            <Toggle Target="openMenu"/>
        </Clicked>
    </Image>
    <Circle ux:Name="button1" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button2" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button3" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button4" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button4" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button5" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button6" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button7" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <Circle ux:Name="button8" Fill="#008FFF" Height="15%" Width="15%">
        <DropShadow Angle="90" Size="-15"/>
    </Circle>
    <WhileTrue ux:Name="openMenu">
        <Rotate Target="menuButton" Degrees="-45" DelayBack="0" Duration="0.2" Easing="QuarticInOut"/>
        <Move Target="button1" Y="-90" Duration="0.9" Easing="QuarticInOut"/>
        <Move Target="button2" X="70" Y="-70" Delay="0.1" Duration="0.9" Easing="QuarticInOut"/>
        <Move Target="button3" X="90" Delay="0.2" Duration="0.9" Easing="QuarticInOut"/>
        <Move Target="button4" X="70" Y="70" Delay="0.3" Duration="0.9" Easing="QuarticInOut"/>
        <Move Target="button5" Y="90" Delay="0.4" Duration="0.9" Easing="QuarticInOut"/>
        <Move Target="button6" X="-70" Y="70" Delay="0.5" Duration="0.9" Easing="QuarticInOut"/>
        <Move Target="button7" X="-90" Delay="0.6" Duration="0.9" Easing="QuarticInOut"/>
        <Move Target="button8" X="-70" Y="-70" Delay="0.7" Duration="0.9" Easing="QuarticInOut"/>
    </WhileTrue>
</Panel>
</App>
2

Very cool :slight_smile:

3

Haha, this is rad! Nice work!

4

Thanks Bent and Jake for the kind feed back :slight_smile: I have made a small update to the code to make it a bit nicer and better to use in projects. The new code can be found posted on the V2 post found here where I tell why i changed things, share the new code and post a new gif of it in action