展示菜单的方法及装置制造方法及图纸

本发明专利技术公开了一种展示菜单的方法及装置，涉及互联网技术领域，为解决现有菜单切换的方式不平滑的问题而发明专利技术。本发明专利技术的方法包括：在菜单的类class属性中添加动画类，动画类用于动态切换菜单；设置动画类中的动画过渡参数；在当前菜单中监测触发事件，触发事件用于触发当前菜单中的菜单项；当监测到触发事件时，查找触发事件触发的菜单项所对应的子菜单；执行动画类，将当前菜单过渡切换为子菜单。本发明专利技术适合应用在设计页面菜单展示样式的过程中。

Method and device for displaying menu

The invention discloses a method and a device for displaying menus, relating to the technical field of Internet, which is invented in order to solve the problem that the menu switching mode is not smooth. The method of the invention comprises: adding animation in Class Properties menu, animation for dynamic switching menu; set up the animation animation in the transition parameter; trigger event monitoring in the current menu, trigger events used to trigger the current menu in the menu item; when monitoring the trigger event, find the trigger menu item the corresponding sub menu event triggered; implementation of animation, the current menu sub menu transition switch. The invention is suitable for being applied in the design of a page menu to display a style.

【技术实现步骤摘要】
展示菜单的方法及装置
本专利技术涉及互联网
，尤其涉及一种展示菜单的方法及装置。
技术介绍
在页面中通常会有菜单栏，而菜单栏中的内容往往不是固定的，需要根据业务需求动态变化。比如在一个具有功能菜单的网站中，假设当前页面菜单栏中显示的菜单为“全局管理”，而“全局管理”对应多个菜单项，每个菜单项对应的子菜单是不同的，当点击其中某一个菜单项时，需要将该菜单项对应子菜单显示出来，即将菜单栏中的“全局管理”菜单切换为某个菜单项对应的子菜单。假设某一菜单项对应的子菜单为“实时监控”“数据分析”“图表展示”，那就需要将“全局管理”切换为“实时监控”“数据分析”“图表展示”在菜单栏中显示。对于上述菜单的切换过程，现有的做法为，将切换前“全局管理”菜单去掉，并将切换后需要展示的“实时监控”“数据分析”“图表展示”“全局管理”菜单直接平铺展示。在上述菜单切换的过程中，专利技术人发现现有的菜单切换方式过于生硬，切换的过程不平滑。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的一种展示菜单的方法及装置。为解决上述技术问题，一方面，本专利技术提供了一种展示菜单的方法，该方法包括：在菜单的类class属性中添加动画类，所述动画类用于动态切换菜单；设置所述动画类中的动画过渡参数；在当前菜单中监测触发事件，所述触发事件用于触发所述当前菜单中的菜单项；当监测到所述触发事件时，查找所述触发事件触发的菜单项所对应的子菜单；执行所述动画类，将所述当前菜单过渡切换为所述子菜单。另一方面，本专利技术还提供了一种展示菜单的装置，该装置包括：添加单元，用于在菜单的类class属性中添加动画类，所述动画类用于动态切换菜单；设置单元，用于设置所述动画类中的动画过渡参数；监测单元，用于在当前菜单中监测触发事件，所述触发事件用于触发所述当前菜单中的菜单项；查找单元，用于当监测到所述触发事件时，查找所述触发事件触发的菜单项所对应的子菜单；执行单元，用于执行所述动画类，将所述当前菜单过渡切换为所述子菜单。借由上述技术方案，本专利技术提供的展示菜单的方法及装置，能够通过为菜单的类属性添加动画类，然后设置动画类的动画过渡参数，当监测到当前菜单中有触发菜单项的触发事件时，对应的查找到被触发菜单项对应的子菜单然后执行设置好的动画类，实现当前菜单到菜单项对应的子菜单的过渡切换。与现有技术相比，本专利技术通过添加菜单动画类，使当前菜单到菜单项对应的子菜单的切换时可以执行添加的动画类，使菜单之间的切换具有一个过渡的过程，使菜单切换的过程更加平滑。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1示出了本专利技术实施例提供的一种展示菜单的方法流程图；图2示出了本专利技术实施例提供的另一种展示菜单的方法流程图；图3示出了本专利技术实施例提供的一种展示菜单的装置的组成框图；图4示出了本专利技术实施例提供的另一种展示菜单的装置的组成框图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。为解决现有菜单切换的方式不平滑的问题，本专利技术实施例提供了一种展示菜单的方法，如图1所示，该方法包括：101、在菜单的类class属性中添加动画类。首先需要说明的是本实施例是使用层叠样式表(CascadingStyleSheets，简称CSS)实现的。在菜单的类class属性中可以有多个类，本步骤是为菜单添加一个新的类，并规定类名为动画类。该动画类是用于动态的切换菜单，其中动态是表示切换菜单时有动画的效果。102、设置动画类中的动画过渡参数。规定了动画类之后，就需要通过设置动画类中的动画过渡参数来实现该动画类需要实现的动态切换菜单的效果。103、在当前菜单中监测触发事件，触发事件用于触发当前菜单中的菜单项。通过后台实时监测当前页面菜单中触发菜单项的触发事件。其中菜单项可以显示在菜单栏中，也可以显示在页面中除菜单栏之外的其他位置。监测触发事件是为了将用户在页面中的操作准确的传给后台，然后由后台判断监测到的操作，然后根据该操作执行相关的动作。其中触发事件是鼠标单击或者双击菜单项所在的位置，或者通过点击菜单项对应的选择按钮实现对菜单项的触发。104、当监测到触发事件时，查找触发事件触发的菜单项所对应的子菜单。当监测到对菜单项的触发事件时，后台会首先根据触发事件的触发位置判断该位置对应的菜单项，然后对应查找该菜单项对应的子菜单。每个菜单项对应的子菜单是不同的，不同子菜单中包含的子菜单项的内容和子菜单的项数也可能是不同的。105、执行动画类，将当前菜单过渡切换为子菜单。后台查找到菜单项对应的子菜单后，需要执行添加好的动画类，实现当前菜单过渡切换为菜单项对应的子菜单的过程，具体的：由类选择器为子菜单选择设置完动画过渡参数的动画类，然后执行该动画类。该过程是区别于将当前菜单直接替换为子菜单，并将子菜单直接平铺展示的切换过程，而是将子菜单以预设的动画效果展示出来的过程，其中预设的动画效果是由动画类中动画过渡参数的设置决定的。本实施例提供的展示菜单的方法，能够通过为菜单的类属性添加动画类，然后设置动画类的动画过渡参数，当监测到当前菜单中有触发菜单项的触发事件时，对应的查找到被触发菜单项对应的子菜单然后执行设置好的动画类，实现当前菜单到菜单项对应的子菜单的过渡切换。与现有技术相比，本实施例通过添加菜单动画类，使当前菜单到菜单项对应的子菜单的切换时可以执行添加的动画类，使菜单之间的切换具有一个过渡的过程，使菜单切换的过程更加平滑。进一步的，作为对图1所示实施例的细化及扩展，本专利技术还提供了另一实施例。如图2所示，该实施例中展示菜单的方法包括：201、在菜单的类class属性中添加动画类。该步骤的实现方式与图1步骤101的实现方式相同，此处不再赘述。202、设置动画过渡的时间、动画过渡的速度以及动画过渡的效果。规定了动画类之后，就需要设置动画类中的动画过渡参数来实现该动画类需要实现的动态切换菜单的效果。其中动画过渡参数的设置包括以下几个步骤：首先，设置动画的过渡时间，动画的过渡时间是指整个动态切换菜单完成的时间。其次，设置动画过渡的速度属性。本实施例中使用的是关键帧动画来实现的动画类的设计。关键帧动画，是提取动画序列中比较关键的帧，设置关键帧的值，而其他时间帧的值，可以用这些关键帧的值，采用特定的方法计算得到，从而达到比较流畅的动画效果。本实施例是将动画过渡的速度属性设置为线性型linear。将速度设置为linear是为了可以将连续两个关键帧之间的时间帧的速度设置为不同的速度，设置不同的速度也是现实动画效果的必要本文档来自技高网...

【技术保护点】
一种展示菜单的方法，其特征在于，所述方法包括：在菜单的类class属性中添加动画类，所述动画类用于动态切换菜单；设置所述动画类中的动画过渡参数；在当前菜单中监测触发事件，所述触发事件用于触发所述当前菜单中的菜单项；当监测到所述触发事件时，查找所述触发事件触发的菜单项所对应的子菜单；执行所述动画类，将所述当前菜单过渡切换为所述子菜单。

【技术特征摘要】
1.一种展示菜单的方法，其特征在于，所述方法包括：在菜单的类class属性中添加动画类，所述动画类用于动态切换菜单；设置所述动画类中的动画过渡参数；在当前菜单中监测触发事件，所述触发事件用于触发所述当前菜单中的菜单项；当监测到所述触发事件时，查找所述触发事件触发的菜单项所对应的子菜单；执行所述动画类，将所述当前菜单过渡切换为所述子菜单。2.根据权利要求1所述的方法，其特征在于，所述设置所述动画类中的动画过渡参数，包括：设置动画过渡的时间、动画过渡的速度属性以及动画过渡的效果。3.根据权利要求2所述的方法，其特征在于，所述设置动画过渡的效果，包括：设置时间比值与高度比值的对应关系，所述时间比值为所述动画过渡的时间的百分比值，所述高度比值为所述子菜单显示界面的高度的百分比值。4.根据权利要求3所述的方法，其特征在于，所述高度比值为负值，所述负值的数值大小用于表示所述子菜单未显示部分的高度。5.根据权利要求1所述的方法，其特征在于，在所述将所述当前菜单过渡切换为所述子菜单之后，所述方法进一步包括：在所述class属性中重新加载设置所述动画过渡参数后的所述动画类。6.一种展示菜单的装置，其特征在于，...

【专利技术属性】
技术研发人员：李济景，
申请(专利权)人：北京国双科技有限公司，
类型：发明
国别省市：北京,11