Create Dropdown Menu with Drilldown Capabilities in GWT.

Question

I want to create a Dropdown Menu with Drilldown capabilities. I have something similar to this in the UI binder XML:

<b:DropDownMenu ui:field="menuInfo" addStyleNames="wt-dropdown-menu">
  <b:AnchorListItem ui:field="menuItemA" text="A"/>
  <b:AnchorListItem ui:field="menuItemB" text="B"/>
</b:DropDownMenu>

Right now this just creates a dropdown with the Items A,B.

I want something like this where I click on A and I have more options to drill down into such as Apple, Alex, Anne whatever.

Currently using GWT 2.7, I know MenuBar has that functionality but wondering if there is I way I can do that via a DropDown.

Answer 1

Like this it should work (tested).

Add the following CSS:

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

Afterwards add the following structure to your *.ui.xml:

<b:AnchorButton dataToggle="DROPDOWN">DropDown</b:AnchorButton>
<b:DropDownMenu>
    <b:ListItem styleName="menu-item dropdown dropdown-submenu">
        <b:Anchor>A</b:Anchor>
        <b:DropDownMenu>
            <b:AnchorListItem>Apple</b:AnchorListItem>
            <b:AnchorListItem>Alex</b:AnchorListItem>
            <b:AnchorListItem>Anne</b:AnchorListItem>
        </b:DropDownMenu>
    </b:ListItem>
    <b:ListItem styleName="menu-item dropdown dropdown-submenu">
        <b:Anchor>B</b:Anchor>
        <b:DropDownMenu>
            <b:AnchorListItem>Ben</b:AnchorListItem>
            <b:AnchorListItem>Bea</b:AnchorListItem>
        </b:DropDownMenu>
    </b:ListItem>
</b:DropDownMenu>

Afterwards the result should look like this (of course you can change the styling):