All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Animation Effects

The Menu enables you to display animation effects upon user interaction.

Each animation has a reverse option which, by default, is used for the closing effect and can be overridden by setting the close animation. Each animation has also a direction which can be set off the animation—for example, slideIn:down. The effects are part of the Kendo FX namespace.

The following example demonstrates how to use the animation effects of the Menu.

<style>
  [data-role="menu"]{
      width: 120px;
  }
  .fieldlist {
      margin: 0 0 -1em;
      padding-bottom: 2em;
  }

  .fieldlist li {
      list-style: none;
      padding-bottom: 1em;
  }
  my-app {
      height: 600px;
  }
</style>
class MenuContainer extends React.Component {
     constructor(props) {
        super(props);
        this.dataSource = props.data;
        this.state = {
         selectedOption: 'slideIn-down'
       };        
    }

    handleOptionChange = (e) => {
        debugger;
      var animation = e.target.value.replace("-",":");
      this.setState({
        selectedOption: e.target.value
      });

      $("[data-role='menu']").data("kendoMenu").setOptions({
          animation: {
              open: {
                  effects: animation,
                  duration: 600
              }
          }
      });
    }

    render() {
        return (
            <div className="example-wrapper">
             <ul className="fieldlist">
                <li><strong>Animation Open effects:</strong></li>
                <li>
                     <input className="k-radio" type="radio" name="animation" id="slideIn-down" value="slideIn-down"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'slideIn-down'}/>
                     <label className="k-radio-label" for="slideIn-down">Slide In - Down</label>
                </li>
                <li>
                     <input className="k-radio" type="radio" name="animation" id="slideIn-up" value="slideIn-up"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'slideIn-up'}/>
                     <label className="k-radio-label" for="slideIn-up">Slide In - Up</label>
                </li>
                 <li>
                    <input className="k-radio" type="radio" name="animation" id="expand-horizontal" value="expand-horizontal"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'expand-horizontal'}/>
                    <label className="k-radio-label" for="expand-horizontal">Expand Horizontal</label>
                </li>
                <li>
                     <input className="k-radio" type="radio" name="animation" id="zoomIn" value="zoomIn"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'zoomIn'}/>
                     <label className="k-radio-label" for="zoomIn">Zoom In</label>
                </li>
                <li>
                    <input className="k-radio" type="radio" name="animation" id="fade-in" value="fade-in"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'fade-in'}/>
                    <label className="k-radio-label" for="fade-in">Fade In</label>
                </li>
              </ul>
              <Menu>
                <MenuItem>
                    Men's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Outdoor Footwear</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Hoodies &amp; Sweatshirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                                <MenuItem>Pants</MenuItem>
                                <MenuItem>Shorts</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Football</MenuItem>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Golf</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
                <MenuItem>
                    Women's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Outdoor Footwear</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>

                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Golf</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
                <MenuItem>
                    Boy's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Outdoor Footwear</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Hoodies &amp; Sweatshirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                                <MenuItem>Pants</MenuItem>
                                <MenuItem>Shorts</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Football</MenuItem>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Rugby</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
                <MenuItem>
                    Girl's
                    <SubMenu>
                        <MenuItem>Footwear
                            <SubMenu>
                                <MenuItem>Leisure Trainers</MenuItem>
                                <MenuItem>Running Shoes</MenuItem>
                                <MenuItem>Fitness Trainers</MenuItem>
                                <MenuItem>Sandals/Flip Flops</MenuItem>
                                <MenuItem>Footwear Accessories</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Leisure Clothing
                            <SubMenu>
                                <MenuItem>T-Shirts</MenuItem>
                                <MenuItem>Hoodies &amp; Sweatshirts</MenuItem>
                                <MenuItem>Jackets</MenuItem>
                                <MenuItem>Pants</MenuItem>
                                <MenuItem>Shorts</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Sports Clothing
                            <SubMenu>
                                <MenuItem>Basketball</MenuItem>
                                <MenuItem>Tennis</MenuItem>
                                <MenuItem>Swimwear</MenuItem>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>Accessories
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
            </Menu>
            </div>
        );
      }
    }

    ReactDOM.render(
      <MenuContainer/>,
      document.querySelector('my-app')
    );
In this article