# Sub-menus and Sub-panels?

**URL:** <https://forums.fusetools.com/t/sub-menus-and-sub-panels/3519>\
**Category:** How-to Discussions\
**Created:** [February 1, 2016, 6:31pm UTC](https://forums.fusetools.com/t/sub-menus-and-sub-panels/3519 "2016-02-01T18:31:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fernando\_Lins](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/fernando_lins/32/597_2.png) [@Fernando\_Lins](https://forums.fusetools.com/u/Fernando_Lins)\
**Post date:** [February 1, 2016, 6:31pm UTC](https://forums.fusetools.com/t/sub-menus-and-sub-panels/3519/1 "2016-02-01T18:31:20Z")

</div>

Hello,

I’m trying to build a custom control similar to a drop-down menu where a main control “spawns” a sub-menu or sub control that floats over other UI elements. I can’t seem to find an example of how I would go about doing it.

Any help with this?

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/PcKsyAR3O9vs-legacy-files-ikaoZ9wPMKvENMAz-uVOdBOfbwhsOEpAkZ-MXIUPX.gif)

---

<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:** [February 2, 2016, 2:37pm UTC](https://forums.fusetools.com/t/sub-menus-and-sub-panels/3519/2 "2016-02-02T14:37:11Z")

</div>

Have you tried using the `Opacity`-property? I have yet to try, and i wont be able to try any real code for a few hours, but try playing around with that. You could create a layer that contains the links and set it to not be visible by default. Then upon clicking the main control changes the Opacity to make the menu visible? Idk if theres a better way but something is better than nothing.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [February 4, 2016, 2:02pm UTC](https://forums.fusetools.com/t/sub-menus-and-sub-panels/3519/3 "2016-02-04T14:02:04Z")

</div>

Hi! Here is a quick example i threw together. It illustrates one way of creating you own dropdown menu. Notice that you supply the data as well through javascript, so this would be reusable as long as you supply the expected data-context (which i would clean up a bit 🙂 ).

```auto
<App Theme="Basic">
    <Panel>

        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var selectedColor = Observable([1,1,0,1]);

            var dropdownOptions = Observable(
                { name: "Red", color: [1,0,0,1] } ,
                { name: "Green", color: [0,1,0,1] } ,
                { name: "Blue", color: [0,0,1,1] } ,
                { name: "Yellow", color: [1,1,0,1] } ,
                { name: "Teal", color: [0,1,1,1] } ,
                { name: "Magenta", color: [1,0,1,1] }
            );

            var selected = Observable();

            function selectMe(arg){
            selected.value = arg.data.name;
            selectedColor.value = arg.data.color;
            }

            module.exports = {
                dropdownOptions: dropdownOptions,
                selected: selected,
                selectMe: selectMe,
                selectedColor: selectedColor
            }

        </JavaScript>

        <Panel ux:Class="DropdownOption" ux:Name="self" Height="30">
            <string ux:Property="Text" />
            <Rectangle Layer="Background">
                <SolidColor ux:Name="bgCol" Color="#EAF0F2" />
                <Stroke Brush="#BFD8DD" Width="2"/>
            </Rectangle>
            <Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="14" Margin="10,0"/>

            <WhileHovering>
                <Change bgCol.Color="#D9E1E4" />
            </WhileHovering>
        </Panel>
        <Panel ux:Class="DropdownSelectedItem" ux:Name="self" Height="40">
            <string ux:Property="Text" />
            <Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="16" Margin="10,0"/>
            <Panel Layer="Background">
                <Rectangle Fill="#FBFDFD" Height="50%" Alignment="Top"/>
                <Rectangle Fill="#EDF3F5" Height="50%" Alignment="Bottom"/>
            </Panel>
        </Panel>

        <SolidColor Color="{selectedColor}"/>

        <Panel Width="200" Height="40">
            <Rectangle>
                <Stroke Brush="#BFD8DD" Width="2"/>
            </Rectangle>
            <DropdownSelectedItem Text="{selected}" />
            <Clicked>
                <Toggle Target="expandDropdown" />
            </Clicked>

            <WhileTrue ux:Name="expandDropdown">
                <StackPanel Offset="0,40">
                    <Each Items="{dropdownOptions}">
                        <DropdownOption Text="{name}" Clicked="{selectMe}" />
                    </Each>
                </StackPanel>
            </WhileTrue>
        </Panel>
    </Panel>
</App>

```

I hope this helps!

---

<div class="post-metadata">

**Author:** ![jianfu.jing](https://avatars.discourse-cdn.com/v4/letter/j/e79b87/32.png) [@jianfu.jing](https://forums.fusetools.com/u/jianfu.jing)\
**Post date:** [February 5, 2016, 3:56am UTC](https://forums.fusetools.com/t/sub-menus-and-sub-panels/3519/4 "2016-02-05T03:56:22Z")

</div>

Thanks.

But how can i wrap these code into a component, And reuse it somewhere else?

I can’t find a way to pass in a callback or something else to reuse this.

What i want to achieve is something like this:

```xml
<DropdownMenu onChange="{someCallBack}" Options="{aListOfOptions}">

```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [February 5, 2016, 9:28am UTC](https://forums.fusetools.com/t/sub-menus-and-sub-panels/3519/5 "2016-02-05T09:28:13Z")

</div>

@jianfu: The code i posted could almost be used like that, you just have to supply the data through javascript. So it looks for the names

```auto
 dropdownOptions
 selected
 selectMe

```

and will work as long as they are in the data-context path.

I’ll look into whether this component can be modularised in a nicer way, but it might require some Uno code 🙂