# Ball Menu Design V2

**URL:** <https://forums.fusetools.com/t/ball-menu-design-v2/5804>\
**Category:** Show and Tell\
**Created:** [January 30, 2016, 4:32am UTC](https://forums.fusetools.com/t/ball-menu-design-v2/5804 "2016-01-30T04:32:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Redux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/redux/32/503_2.png) [@Redux](https://forums.fusetools.com/u/Redux)\
**Post date:** [January 30, 2016, 4:32am UTC](https://forums.fusetools.com/t/ball-menu-design-v2/5804/1 "2016-01-30T04:32:25Z")

</div>

Hey all,

I recently posted a forum post about my ball menu design. Upon talking to a few people I know, I decided to make a small update to the design to. It was suggested to me that having it in the center was a bit “intrusive” so I fixed it. A gif of the new version in action can be found [here](http://i.imgur.com/BmUhj0f.gifv)

The new code is

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

```