@progress/kendo-layout-react-wrapper

--- title: Animation Effects page_title: Animation Effects - Menu - Kendo UI Wrappers for React description: "Customize the animation effects of the Kendo UI Menu wrapper for React." slug: animations_menu position: 5 --- # 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`](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu#configuration-animation.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](https://docs.telerik.com/kendo-ui/api/javascript/effects/common) namespace. The following example demonstrates how to use the [`animation`](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu#configuration-animation) effects of the Menu. {% meta height:460 %} ```html <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> ``` ```jsx-preview 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 & 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 & 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 & 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') ); ``` {% endmeta %} ## Suggested Links * [Kendo UI Menu for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/menu/overview) * [API Reference of the Menu Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu)