品才网>辅助设计与工程计算>设计菜单横向隐藏与显示的效果

设计菜单横向隐藏与显示的效果

设计菜单横向隐藏与显示的效果

　　1、在做菜单动态效果之前，诸位应该首先需要知道，我们需要什么组件，以最简单的样式来说，首先我们需要一个菜单的动态面板，一个菜单的显示按钮，一个菜单的隐藏按钮，若需要，还可增加一个菜单的具体页面。

　　2、菜单与图片的显示，要按照自己的要求来设定，比如若想要进入页面后，页面的菜单是显示状态的，则菜单与菜单隐藏按钮直接显示出来，菜单的显示按钮隐藏掉即可，反之，则要隐藏掉菜单与菜单隐藏按钮，直接显示出菜单显示按钮，此外将菜单的显示/隐藏按钮做成动态面板，通过点击来回切换，也是可行的。

　　3、设置好需要隐藏的菜单后，将隐藏与显示按钮位置重合覆盖掉后平移至需要的位置，比如x轴为0的位置后即可，此时需要开始添加动态事件。

　　4、动态效果需要对两个按钮分别添加，对隐藏按钮来说，需要添加点击后，可将菜单隐藏掉，可将自己隐藏掉，同事还可显示出菜单显示按钮的动态事件;对显示按钮来说，效果基本都是反向的，具体如图所示

　　5、最终效果如下，可通过点击实现菜单向左隐藏，向右显示的效果。

　　6、菜单显示隐藏的效果需要视情况而定，比如网页版，像360导航首页，右侧本身有留白区域，菜单的隐藏显示基本与主页面无关，但本人经历过的OA、CRM等办公系统，在设计菜单隐藏显示效果时一般都会要求页面主要内容与菜单隐藏显示效果一起移动，这点应该在对应的系统设计中，按要求实现。

【设计菜单横向隐藏与显示的效果】相关文章：