展示菜单的方法及装置与流程

本发明涉及互联网技术领域，尤其涉及一种展示菜单的方法及装置。

背景技术：

在页面中通常会有菜单栏，而菜单栏中的内容往往不是固定的，需要根据业务需求动态变化。比如在一个具有功能菜单的网站中，假设当前页面菜单栏中显示的菜单为“全局管理”，而“全局管理”对应多个菜单项，每个菜单项对应的子菜单是不同的，当点击其中某一个菜单项时，需要将该菜单项对应子菜单显示出来，即将菜单栏中的“全局管理”菜单切换为某个菜单项对应的子菜单。假设某一菜单项对应的子菜单为“实时监控”“数据分析”“图表展示”，那就需要将“全局管理”切换为“实时监控”“数据分析”“图表展示”在菜单栏中显示。

对于上述菜单的切换过程，现有的做法为，将切换前“全局管理”菜单去掉，并将切换后需要展示的“实时监控”“数据分析”“图表展示”“全局管理”菜单直接平铺展示。

在上述菜单切换的过程中，发明人发现现有的菜单切换方式过于生硬，切换的过程不平滑。

技术实现要素：

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种展示菜单的方法及装置。

为解决上述技术问题，一方面，本发明提供了一种展示菜单的方法，该方法包括：

在菜单的类class属性中添加动画类，所述动画类用于动态切换菜单；

设置所述动画类中的动画过渡参数；

在当前菜单中监测触发事件，所述触发事件用于触发所述当前菜单中的菜单项；

当监测到所述触发事件时，查找所述触发事件触发的菜单项所对应的 子菜单；

执行所述动画类，将所述当前菜单过渡切换为所述子菜单。

另一方面，本发明还提供了一种展示菜单的装置，该装置包括：

添加单元，用于在菜单的类class属性中添加动画类，所述动画类用于动态切换菜单；

设置单元，用于设置所述动画类中的动画过渡参数；

监测单元，用于在当前菜单中监测触发事件，所述触发事件用于触发所述当前菜单中的菜单项；

查找单元，用于当监测到所述触发事件时，查找所述触发事件触发的菜单项所对应的子菜单；

执行单元，用于执行所述动画类，将所述当前菜单过渡切换为所述子菜单。

借由上述技术方案，本发明提供的展示菜单的方法及装置，能够通过为菜单的类属性添加动画类，然后设置动画类的动画过渡参数，当监测到当前菜单中有触发菜单项的触发事件时，对应的查找到被触发菜单项对应的子菜单然后执行设置好的动画类，实现当前菜单到菜单项对应的子菜单的过渡切换。与现有技术相比，本发明通过添加菜单动画类，使当前菜单到菜单项对应的子菜单的切换时可以执行添加的动画类，使菜单之间的切换具有一个过渡的过程，使菜单切换的过程更加平滑。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例提供的一种展示菜单的方法流程图；

图2示出了本发明实施例提供的另一种展示菜单的方法流程图；

图3示出了本发明实施例提供的一种展示菜单的装置的组成框图；

图4示出了本发明实施例提供的另一种展示菜单的装置的组成框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

为解决现有菜单切换的方式不平滑的问题，本发明实施例提供了一种展示菜单的方法，如图1所示，该方法包括：

101、在菜单的类class属性中添加动画类。

首先需要说明的是本实施例是使用层叠样式表(Cascading Style Sheets，简称CSS)实现的。

在菜单的类class属性中可以有多个类，本步骤是为菜单添加一个新的类，并规定类名为动画类。该动画类是用于动态的切换菜单，其中动态是表示切换菜单时有动画的效果。

102、设置动画类中的动画过渡参数。

规定了动画类之后，就需要通过设置动画类中的动画过渡参数来实现该动画类需要实现的动态切换菜单的效果。

103、在当前菜单中监测触发事件，触发事件用于触发当前菜单中的菜单项。

通过后台实时监测当前页面菜单中触发菜单项的触发事件。其中菜单项可以显示在菜单栏中，也可以显示在页面中除菜单栏之外的其他位置。监测触发事件是为了将用户在页面中的操作准确的传给后台，然后由后台判断监测到的操作，然后根据该操作执行相关的动作。

其中触发事件是鼠标单击或者双击菜单项所在的位置，或者通过点击菜单项对应的选择按钮实现对菜单项的触发。

104、当监测到触发事件时，查找触发事件触发的菜单项所对应的子菜单。

当监测到对菜单项的触发事件时，后台会首先根据触发事件的触发位置判断该位置对应的菜单项，然后对应查找该菜单项对应的子菜单。每个菜单项对应的子菜单是不同的，不同子菜单中包含的子菜单项的内容和子菜单的项数也可能是不同的。

105、执行动画类，将当前菜单过渡切换为子菜单。

后台查找到菜单项对应的子菜单后，需要执行添加好的动画类，实现当前菜单过渡切换为菜单项对应的子菜单的过程，具体的：由类选择器为子菜单选择设置完动画过渡参数的动画类，然后执行该动画类。该过程是区别于将当前菜单直接替换为子菜单，并将子菜单直接平铺展示的切换过程，而是将子菜单以预设的动画效果展示出来的过程，其中预设的动画效果是由动画类中动画过渡参数的设置决定的。

本实施例提供的展示菜单的方法，能够通过为菜单的类属性添加动画类，然后设置动画类的动画过渡参数，当监测到当前菜单中有触发菜单项的触发事件时，对应的查找到被触发菜单项对应的子菜单然后执行设置好的动画类，实现当前菜单到菜单项对应的子菜单的过渡切换。与现有技术相比，本实施例通过添加菜单动画类，使当前菜单到菜单项对应的子菜单的切换时可以执行添加的动画类，使菜单之间的切换具有一个过渡的过程，使菜单切换的过程更加平滑。

进一步的，作为对图1所示实施例的细化及扩展，本发明还提供了另一实施例。如图2所示，该实施例中展示菜单的方法包括：

201、在菜单的类class属性中添加动画类。

该步骤的实现方式与图1步骤101的实现方式相同，此处不再赘述。

202、设置动画过渡的时间、动画过渡的速度以及动画过渡的效果。

规定了动画类之后，就需要设置动画类中的动画过渡参数来实现该动画类需要实现的动态切换菜单的效果。其中动画过渡参数的设置包括以下几个步骤：

首先，设置动画的过渡时间，动画的过渡时间是指整个动态切换菜单完成的时间。

其次，设置动画过渡的速度属性。本实施例中使用的是关键帧动画来 实现的动画类的设计。关键帧动画，是提取动画序列中比较关键的帧，设置关键帧的值，而其他时间帧的值，可以用这些关键帧的值，采用特定的方法计算得到，从而达到比较流畅的动画效果。

本实施例是将动画过渡的速度属性设置为线性型linear。将速度设置为linear是为了可以将连续两个关键帧之间的时间帧的速度设置为不同的速度，设置不同的速度也是现实动画效果的必要前提。给出示例进行说明：假设动画的过渡时间为1s，假设选择其中0s、0.4s、1s三个关键帧，将速度设置为linear之后，就可以将0s到0.4s之间的其它帧的设置一个速度，然后将0.4s到1s的之间的其他帧的设置另外一个不同的速度。

最后，设置动画效果。设置动画效果即设置关键帧动画，具体的是设置时间比值与高度比值的对应关系，其中时间比值为动画过渡的时间的百分比值，其中高度比值为子菜单显示界面的高度的百分比值。另外高度比值为负值，负值的数值大小用于表示子菜单未显示部分的高度。

为了更清楚地描述上述对动画过渡参数的设置的步骤，给出具体实现代码：

其中menuAnimation是规定的动画类的名称，1s为动画过渡的时间，linear是规定过渡的速度属性。animation-name是规定动画类需要绑定的关键帧动画的名称为bounceinT，bounceinT是根据具体的动画效果自己定义的，本示例想要设置回弹的效果，因此规定为bounceinT。然后为绑定的关键帧动画进行设置。具体的：

其中@keyframes是指使用的是关键帧动画，translateY表示转换的是Y轴方向的值。另外单独出现的0％、40％、100％是相对于过渡时间的百分比，即选出了0s、0.4s、1s三个时刻对应的时间帧为关键帧。translateY后面的括号中的0％、40％、100％是相对于子菜单显示界面的高度的百分比。上述代码是规定了0s时刻的关键帧的位置为-100％倍的子菜单显示界面的高度，即子菜单为全部隐藏状态；规定了0.4s时刻的关键帧的位置为-43％倍的子菜单显示界面的高度，即子菜单的位置为隐藏了43％；规定了1s时刻的关键帧的位置为0％倍的子菜单显示界面的高度，即子菜单的位置为全部显示。

规定了三个关键帧的位置后，其他时间帧的位置会根据三个关键帧的位置、过渡时间以及过渡的速度属性自动生成，最终实现回弹的动画效果。

203、在当前菜单中监测触发事件，触发事件用于触发当前菜单中的菜单项。

该步骤的实现方式与图1步骤103的实现方式相同，此处不再赘述。

204、当监测到触发事件时，查找触发事件触发的菜单项所对应的子菜单。

该步骤的实现方式与图1步骤104的实现方式相同，此处不再赘述。

205、执行动画类，将当前菜单过渡切换为子菜单。

该步骤的实现方式与图1步骤105的实现方式相同，此处不再赘述。

206、在class属性中重新加载设置动画过渡参数后的动画类。

在将所述当前菜单过渡切换为子菜单之后，若需要重新显示菜单切换的动态效果就需要用爪哇脚本(JavaScript，简称JS)来控制，具体的控制方式在需要重新显示菜单切换的动态效果时先删除已经设置动画过渡参数 后的动画类，然后再立即重新加载该动画类就可以再次实现切换菜单时的动态效果。

进一步的，作为对上述图1和图2所示方法的实现，本发明实施例另一实施例还提供了一种菜单展示的装置，用于对上述图1和图2所示的方法进行实现。该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。如图3所示，该装置包括：添加单元31、设置单元32、监测单元33、查找单元34以及执行单元35。

添加单元31，用于在菜单的类class属性中添加动画类，动画类用于动态切换菜单；

设置单元32，用于设置动画类中的动画过渡参数；

监测单元33，用于在当前菜单中监测触发事件，触发事件用于触发当前菜单中的菜单项；

查找单元34，用于当监测到触发事件时，查找触发事件触发的菜单项所对应的子菜单；

执行单元35，用于执行动画类，将当前菜单过渡切换为子菜单。

进一步的，设置单元32用于：

设置动画过渡的时间、动画过渡的速度属性以及动画过渡的效果。

进一步的，设置单元32用于：

设置时间比值与高度比值的对应关系，时间比值为动画过渡的时间的百分比值，高度比值为子菜单显示界面的高度的百分比值。

进一步的，设置单元32中的高度比值为负值，负值的数值大小用于表示子菜单未显示部分的高度。

进一步的，如图4所示，装置进一步包括：

加载单元36，用于在将当前菜单过渡切换为子菜单之后，在class属性中重新加载设置动画过渡参数后的动画类。

本实施例提供的展示菜单的装置，能够通过为菜单的类属性添加动画类，然后设置动画类的动画过渡参数，当监测到当前菜单中有触发菜单项 的触发事件时，对应的查找到被触发菜单项对应的子菜单然后执行设置好的动画类，实现当前菜单到菜单项对应的子菜单的过渡切换。与现有技术相比，本实施例通过添加菜单动画类，使当前菜单到菜单项对应的子菜单的切换时可以执行添加的动画类，使菜单之间的切换具有一个过渡的过程，使菜单切换的过程更加平滑。

所述展示菜单装置包括处理器和存储器，上述添加单元31、设置单元32、监测单元33、查找单元34以及执行单元35等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：在菜单的类class属性中添加动画类，动画类用于动态切换菜单；设置动画类中的动画过渡参数；在当前菜单中监测触发事件，触发事件用于触发当前菜单中的菜单项；当监测到触发事件时，查找触发事件触发的菜单项所对应的子菜单；执行动画类，将当前菜单过渡切换为子菜单。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。