一种分类导航的下拉菜单设计实现方法
【专利摘要】本发明提出了一种分类导航的下拉菜单设计实现方法，该方法包括以下步骤：a.实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据；b.通过鼠标的位移量判断鼠标是否在线段AB下方和线段AC上方的特定区域，若在，则执行步骤d；若不在，则执行步骤c；c.更新数据，同步显示鼠标所在菜单对应的下拉菜单，再次执行步骤a；d.监听鼠标移动过程是否有停顿，若无停顿，则执行步骤e；若有停顿，则执行步骤c；e.下拉菜单不变，向目标下拉子菜单的方向快速移动鼠标并选择。本发明实现了下拉菜单快速响应同步显示，消除了延迟显示带来的影响，提高了浏览效率；用户使用时可斜着移动鼠标至下拉菜单且下拉菜单不消失，增强了用户体验。
【专利说明】一种分类导航的下拉菜单设计实现方法
【技术领域】
[0001]本发明涉及计算机应用领域，特别涉及一种分类导航的下拉菜单设计实现方法。
【背景技术】
[0002]在计算机应用中，对于下拉菜单，当用户选中一个选项后，该选项会向下延伸出具有其他选项的另一个菜单。下拉式菜单通常应用于把一些具有相同分类的功能放在同一个下拉式菜单中，并把这个下拉菜单置于主菜单的选项下。分类导航的下拉菜单设计是基于下拉菜单的功能特点，把大量的信息逐步细分和归类，在有限的空间内展示给用户更多的信息。
[0003]传统的分类导航下拉菜单显示下拉菜单有一定的延迟，因为若不这样做，斜着移动鼠标时鼠标事件消失，下拉菜单就会消失，对于用户来说一般需要先平移鼠标到下拉菜单，然后才能在下拉菜单列表中选择目标子菜单。但采用延迟的方法存在一个问题，即当鼠标移动至某菜单时因为时间延迟其下拉菜单不能同步显示。举个例子，假设分类导航中有10个主菜单，当鼠标连续快速从菜单I拖动到菜单10的过程中,可能只有3到4个菜单响应鼠标事件显示下拉菜单，而其他菜单则来不及响应。
[0004]目前网站分类导航的下拉菜单被使用得非常频繁，若下拉菜单延迟显示，则用户不能快速浏览到目标信息，影响了用户的使用体验；且用户只能水平移动鼠标至下拉菜单，然后再变化方向到目标子菜单，而不能斜着移动鼠标直接到目标子菜单。
【发明内容】
[0005]针对现有的分类导航的下拉菜单中存在的问题，本发明提出了一种分类导航的下拉菜单设计实现方法，实时监听鼠标移动事件，获取目标菜单的相关数据，判断鼠标是否在特定区域，监听鼠标移动过程是否停顿，更新数据信息或选择目标下拉子菜单。
[0006]为实现上述
【发明内容】
，本发明采用了一种分类导航的下拉菜单设计实现方法，该方法包括以下步骤:
[0007]a.实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据，包括菜单上的鼠标位置A (Xx，Yy)，和其下拉菜单的位置B (Mm，Nn)，C (Pp, Qq)；
[0008]b.通过鼠标的位移量判断鼠标是否在线段AB下方和线段AC上方的特定区域，若在，则执行步骤d ;若不在，则执行步骤c ；
[0009]c.更新数据，同步显示鼠标所在菜单对应的下拉菜单，再次执行步骤a;
[0010]d.监听鼠标移动过程是否有停顿，若无停顿，则执行步骤e ;若有停顿，则执行步骤c:
[0011]e.下拉菜单不变，向目标下拉子菜单的方向快速移动鼠标并选择。
[0012]进一步，步骤b中获取鼠标位移量之后，通过比较与线段AB和线段AC斜率的方法判断鼠标是否在特定区域。
[0013]进一步，所述下拉菜单的位置B、C为下拉菜单标签的左上角和左下角。
[0014]进一步，所述下拉菜单的位置B、C为下拉菜单标签的右上角和右下角。
[0015]与现有技术相比，本发明实现了下拉菜单快速响应同步显示，消除了延迟显示带来的影响，提高了浏览效率；用户使用时可斜着移动鼠标至下拉菜单且下拉菜单不消失，增强了用户体验。
【专利附图】
【附图说明】
[0016]图1为本发明所提供的一种分类导航的下拉菜单设计实现方法的流程图；
[0017]图2为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例一；
[0018]图3为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例二。
【具体实施方式】
[0019]为了使本发明所提到的一种分类导航的下拉菜单设计实现方法及其优点更加清楚明确，以下参照附图对本发明进行更进一步的详细说明。
[0020]图1为本发明所提供的一种分类导航的下拉菜单设计实现方法的流程图，如图1所示，该方法的主要流程步骤如下:
[0021]步骤1，实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据。
[0022]相关数据包括菜单上的鼠标位置A (Xx, Yy)，其下拉菜单的位置B (Mffl, Nn)，C (Pp, Qq)，其中下#X、y、m、n、p、q为变量，随着鼠标和下拉菜单的位置变化而变化。其中，下拉菜单可以是在分类导航菜单的右侧，也可以是在分类导航下拉菜单的左侧。
[0023]步骤2，判断鼠标是否在线段AB下方和线段AC上方的特定区域。
[0024]鼠标A的位置变化后，通过比较与线段AB和线段AC斜率的方法判断鼠标是否在特定区域，若鼠标在该特定区域，则接着执行步骤4;若鼠标不在该特定区域，则接着执行步骤3。
[0025]步骤3，更新数据，同步显示鼠标所在菜单对应的下拉菜单。
[0026]随着鼠标移动，菜单响应鼠标移动事件，其下拉菜单也同时变化。
[0027]步骤4，监听鼠标移动过程是否有停顿。
[0028]鼠标在特定区域移动时，如果监听到其有停顿，则菜单响应鼠标事件，执行步骤3，更新数据，显示新的下拉菜单；如果没有停顿，则下拉菜单不变，执行步骤5。停顿的响应时间根据用户需求预先设置。
[0029]步骤5，下拉菜单不变，向目标下拉子菜单方向快速移动鼠标并选择。
[0030]鼠标可以直接斜向移动至目标下拉子菜单且此时菜单不响应鼠标移动事件，无需先水平方向移动和设置下拉菜单延迟显示。
[0031]进一步，目标菜单变化，下拉菜单也同步变化，重新执行本发明方法。
[0032]图2为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例一，如图
2所示，左侧为分类导航菜单:菜单1、菜单2、菜单3、菜单4.....菜单n-1，菜单η ;右侧显示为菜单对应的下拉菜单，在图2中鼠标移动到菜单2，故为菜单2的下拉菜单:下拉21、下拉22、下拉23、下拉24.....下拉2m-l，下拉m，当前目标下拉菜单为下拉2m_l。
[0033]该实施过程如下:
[0034]监听到鼠标移动到菜单2，获取鼠标的位置A(Xx，Yy)和菜单2的下拉菜单位置B(Mm, Nn), C(Pp, Qq), Mm = Pp ;计算鼠标的位移量:如果鼠标移动后的新位置为黑色圆点A1 (Xx1, Yy1)，其中 Mm > Xx1 > Xx, Qq < Yy1 < Yy,鼠标位置变化量为 ΛΧ = Xx1-Xx, ΔΥ =Yy1-Yy, A1相对于A的斜率变化为k = Λ Y/ Λ X。线段AB的斜率Ic1 = (Nn-Yy) / (Mm-Xx) > O，线段AC的斜率k2 = (Qq-Yy) / (Pp-Xx) < O，通过比较斜率可以判断出A1在线段AB下方和线段AC上方的特定区域；进一步，监听鼠标移动过程是否停顿，若未停顿，则下拉菜单不变，此时菜单3不响应鼠标事件，鼠标可以直接斜向移动至目标下拉菜单下拉2m-l ;如果鼠标移动过程出现停顿，菜单3立即响应鼠标事件，此时下拉菜单变为菜单3的下拉菜单。
[0035]如果鼠标移动后的新位置为黑色圆点A2(Xx2，Yy2)，其中Xx2 < Xx, Qq < Yy2 < Yy,鼠标位置变化量为λ X = Xx2-Xx, λ Y = Yy2-Yy, A2相对于A的斜率变化为k = Λ Y/ Λ X。线段 AB 的斜率 Ic1 = (Nn-Yy) / (Mm-Xx) > O,线段 AC 的斜率 k2 = (Qq-Yy) / (Pp-Xx) < O,通过比较斜率可以判断出A2不在线段AB下方和线段AC上方的特定区域；数据更新，菜单4立即响应鼠标事件，此时下拉菜单变为菜单4的下拉菜单，接着再次执行本发明方法。
[0036]图3为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例二，如图
3所示，右侧为分类导航菜单:菜单1、菜单2、菜单3、菜单4.....菜单n-1，菜单η ;左侧显示为菜单对应的下拉菜单，在图3中鼠标移动到菜单η-1，故为菜单η-1的下拉菜单:下拉(n-1) 1、下拉(n-1) 2、下拉(n_l)3、下拉(n_l) 4、...、下拉(n-l)m-l,下拉(n_l)m,当前目标下拉菜单为下拉(n-1) 3。
[0037]该实施过程如下:
[0038]监听到鼠标移动到菜单n-1，获取鼠标的位置A(Xx，Yy)和菜单n_l的下拉菜单位置B(Mm，Nn)，C(Pp, Qq), Mffl = Pp ;计算鼠标的位移量:如果鼠标移动后的新位置为黑色圆点A/ (Xx1, Yy1)，其中 Mm < Xx1 < Xx, Yy < Yy1 < Nn,鼠标位置变化量为 ΔΧ = Xx1-Xx, Λ Y=Yy1-Yy, A1'相对于A的斜率变化为k = Λ Y/ Λ X。线段AB的斜率ki = (Nn-Yy) / (Mm-Xx)
<0，线段AC的斜率k2 = (Qq-Yy)/(Pp-Xx) > 0，通过比较斜率可以判断出Al'在线段AB下方和线段AC上方的特定区域；进一步，监听鼠标移动过程是否停顿，若未停顿，则下拉菜单不变，此时菜单4不响应鼠标事件，鼠标可以直接斜向移动至目标下拉菜单下拉(n-l)3 ；如果鼠标移动过程出现停顿，菜单4立即响应鼠标事件，此时下拉菜单变为菜单4的下拉菜单。
[0039]如果鼠标移动后的新位置为黑色圆点A2' (Xx2，Yy2)，其中Mm < Xx2 < Xx,Yy < Yy2
<Nn,鼠标位置变化量为ΛΧ = Xx2-Xx, Λ Y = Yy2-Yy, A2'相对于A的斜率变化为k = Λ Y/Λ X。线段 AB 的斜率 Ic1 = (Nn-Yy) / (Mm-Xx) < 0，线段 AC 的斜率 k2 = (QrYy) / (Pp-Xx) > 0，通过比较斜率可以判断出A2'不在线段AB下方和线段AC上方的特定区域；数据更新，菜单3立即响应鼠标事件，此时下拉菜单变为菜单3的下拉菜单，接着再次执行本发明方法。
[0040]以上所述是对本发明的较佳的【具体实施方式】，本【技术领域】人员应当理解，所述实施方式并非限定本发明的保护范围。在不脱离本发明的精神实质和原则下，在细节方面可以进行变化或者修改，均应涵盖在本发明的权利要求范围之内。
【权利要求】
1.一种分类导航的下拉菜单设计实现方法，其特征在于，该方法包括以下步骤: a.实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据，包括菜单上的鼠标位置A (Xx, Yy)，和其下拉菜单的位置B (Mffl, Nn)，C (Pp, Qq)； b.通过鼠标的位移量判断鼠标是否在线段AB下方和线段AC上方的特定区域，若在，则执行步骤d ;若不在，则执行步骤c ； c.更新数据，同步显示鼠标所在菜单对应的下拉菜单，再次执行步骤a；d.监听鼠标移动过程是否有停顿，若无停顿，则执行步骤e;若有停顿，则执行步骤c ; e.下拉菜单不变，向目标下拉子菜单的方向快速移动鼠标并选择。
2.如权利要求1所述的一种分类导航的下拉菜单设计实现方法，步骤b中获取鼠标位移量之后，通过比较与线段AB和线段AC斜率的方法判断鼠标是否在特定区域。
3.如权利要求1所述的一种分类导航的下拉菜单设计实现方法，所述下拉子菜单的位置B、C为下拉子菜单标签的左上角和左下角。
4.如权利要求1所述的一种分类导航的下拉菜单设计实现方法，所述下拉子菜单的位置B、C为下拉子菜单标签的右上角和右下角。
【文档编号】G06F9/44GK104077115SQ201310099005
【公开日】2014年10月1日 申请日期:2013年3月27日 优先权日:2013年3月27日
【发明者】牟春林 申请人:苏州精易会信息技术有限公司