CN104077115A - 一种分类导航的下拉菜单设计实现方法 - Google Patents

一种分类导航的下拉菜单设计实现方法 Download PDF

Info

Publication number
CN104077115A
CN104077115A CN201310099005.XA CN201310099005A CN104077115A CN 104077115 A CN104077115 A CN 104077115A CN 201310099005 A CN201310099005 A CN 201310099005A CN 104077115 A CN104077115 A CN 104077115A
Authority
CN
China
Prior art keywords
mouse
drop
menu
down menu
line segment
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201310099005.XA
Other languages
English (en)
Inventor
牟春林
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
SUZHOU JINGYIHUI INFORMATION TECHNOLOGY Co Ltd
Original Assignee
SUZHOU JINGYIHUI INFORMATION TECHNOLOGY Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by SUZHOU JINGYIHUI INFORMATION TECHNOLOGY Co Ltd filed Critical SUZHOU JINGYIHUI INFORMATION TECHNOLOGY Co Ltd
Priority to CN201310099005.XA priority Critical patent/CN104077115A/zh
Publication of CN104077115A publication Critical patent/CN104077115A/zh
Pending legal-status Critical Current

Links

Landscapes

  • Digital Computer Display Output (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提出了一种分类导航的下拉菜单设计实现方法，该方法包括以下步骤：a.实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据；b.通过鼠标的位移量判断鼠标是否在线段AB下方和线段AC上方的特定区域，若在，则执行步骤d；若不在，则执行步骤c；c.更新数据，同步显示鼠标所在菜单对应的下拉菜单，再次执行步骤a；d.监听鼠标移动过程是否有停顿，若无停顿，则执行步骤e；若有停顿，则执行步骤c；e.下拉菜单不变，向目标下拉子菜单的方向快速移动鼠标并选择。本发明实现了下拉菜单快速响应同步显示，消除了延迟显示带来的影响，提高了浏览效率；用户使用时可斜着移动鼠标至下拉菜单且下拉菜单不消失，增强了用户体验。

Description

一种分类导航的下拉菜单设计实现方法
技术领域
本发明涉及计算机应用领域，特别涉及一种分类导航的下拉菜单设计实现方法。
背景技术
在计算机应用中，对于下拉菜单，当用户选中一个选项后，该选项会向下延伸出具有其他选项的另一个菜单。下拉式菜单通常应用于把一些具有相同分类的功能放在同一个下拉式菜单中，并把这个下拉菜单置于主菜单的选项下。分类导航的下拉菜单设计是基于下拉菜单的功能特点，把大量的信息逐步细分和归类，在有限的空间内展示给用户更多的信息。
传统的分类导航下拉菜单显示下拉菜单有一定的延迟，因为若不这样做，斜着移动鼠标时鼠标事件消失，下拉菜单就会消失，对于用户来说一般需要先平移鼠标到下拉菜单，然后才能在下拉菜单列表中选择目标子菜单。但采用延迟的方法存在一个问题，即当鼠标移动至某菜单时因为时间延迟其下拉菜单不能同步显示。举个例子，假设分类导航中有10个主菜单，当鼠标连续快速从菜单1拖动到菜单10的过程中，可能只有3到4个菜单响应鼠标事件显示下拉菜单，而其他菜单则来不及响应。
目前网站分类导航的下拉菜单被使用得非常频繁，若下拉菜单延迟显示，则用户不能快速浏览到目标信息，影响了用户的使用体验；且用户只能水平移动鼠标至下拉菜单，然后再变化方向到目标子菜单，而不能斜着移动鼠标直接到目标子菜单。
发明内容
针对现有的分类导航的下拉菜单中存在的问题，本发明提出了一种分类导航的下拉菜单设计实现方法，实时监听鼠标移动事件，获取目标菜单的相关数据，判断鼠标是否在特定区域，监听鼠标移动过程是否停顿，更新数据信息或选择目标下拉子菜单。
为实现上述发明内容，本发明采用了一种分类导航的下拉菜单设计实现方法，该方法包括以下步骤：
a.实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据，包括菜单上的鼠标位置A(Xx，Yy)，和其下拉菜单的位置B(Mm，Nn)，C(Pp，Qq)；
b.通过鼠标的位移量判断鼠标是否在线段AB下方和线段AC上方的特定区域，若在，则执行步骤d；若不在，则执行步骤c；
c.更新数据，同步显示鼠标所在菜单对应的下拉菜单，再次执行步骤a；
d.监听鼠标移动过程是否有停顿，若无停顿，则执行步骤e；若有停顿，则执行步骤c：
e.下拉菜单不变，向目标下拉子菜单的方向快速移动鼠标并选择。
进一步，步骤b中获取鼠标位移量之后，通过比较与线段AB和线段AC斜率的方法判断鼠标是否在特定区域。
进一步，所述下拉菜单的位置B、C为下拉菜单标签的左上角和左下角。
进一步，所述下拉菜单的位置B、C为下拉菜单标签的右上角和右下角。
与现有技术相比，本发明实现了下拉菜单快速响应同步显示，消除了延迟显示带来的影响，提高了浏览效率；用户使用时可斜着移动鼠标至下拉菜单且下拉菜单不消失，增强了用户体验。
附图说明
图1为本发明所提供的一种分类导航的下拉菜单设计实现方法的流程图；
图2为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例一；
图3为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例二。
具体实施方式
为了使本发明所提到的一种分类导航的下拉菜单设计实现方法及其优点更加清楚明确，以下参照附图对本发明进行更进一步的详细说明。
图1为本发明所提供的一种分类导航的下拉菜单设计实现方法的流程图，如图1所示，该方法的主要流程步骤如下：
步骤1，实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据。
相关数据包括菜单上的鼠标位置A(Xx，Yy)，其下拉菜单的位置B(Mm，Nn)，C(Pp，Qq)，其中下标x、y、m、n、p、q为变量，随着鼠标和下拉菜单的位置变化而变化。其中，下拉菜单可以是在分类导航菜单的右侧，也可以是在分类导航下拉菜单的左侧。
步骤2，判断鼠标是否在线段AB下方和线段AC上方的特定区域。
鼠标A的位置变化后，通过比较与线段AB和线段AC斜率的方法判断鼠标是否在特定区域，若鼠标在该特定区域，则接着执行步骤4；若鼠标不在该特定区域，则接着执行步骤3。
步骤3，更新数据，同步显示鼠标所在菜单对应的下拉菜单。
随着鼠标移动，菜单响应鼠标移动事件，其下拉菜单也同时变化。
步骤4，监听鼠标移动过程是否有停顿。
鼠标在特定区域移动时，如果监听到其有停顿，则菜单响应鼠标事件，执行步骤3，更新数据，显示新的下拉菜单；如果没有停顿，则下拉菜单不变，执行步骤5。停顿的响应时间根据用户需求预先设置。
步骤5，下拉菜单不变，向目标下拉子菜单方向快速移动鼠标并选择。
鼠标可以直接斜向移动至目标下拉子菜单且此时菜单不响应鼠标移动事件，无需先水平方向移动和设置下拉菜单延迟显示。
进一步，目标菜单变化，下拉菜单也同步变化，重新执行本发明方法。
图2为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例一，如图2所示，左侧为分类导航菜单：菜单1、菜单2、菜单3、菜单4、...、菜单n-1，菜单n；右侧显示为菜单对应的下拉菜单，在图2中鼠标移动到菜单2，故为菜单2的下拉菜单：下拉21、下拉22、下拉23、下拉24、...、下拉2m-1，下拉m，当前目标下拉菜单为下拉2m-1。
该实施过程如下：
监听到鼠标移动到菜单2，获取鼠标的位置A(Xx，Yy)和菜单2的下拉菜单位置B(Mm，Nn)，C(Pp，Qq)，Mm＝Pp；计算鼠标的位移量：如果鼠标移动后的新位置为黑色圆点A1(Xx1，Yy1)，其中Mm＞Xx1＞Xx，Qq＜Yy1＜Yy，鼠标位置变化量为ΔX＝Xx1-Xx，ΔY＝Yy1-Yy，A1相对于A的斜率变化为k＝ΔY/ΔX。线段AB的斜率k1＝(Nn-Yy)/(Mm-Xx)＞0，线段AC的斜率k2＝(Qq-Yy)/(Pp-Xx)＜0，通过比较斜率可以判断出A1在线段AB下方和线段AC上方的特定区域；进一步，监听鼠标移动过程是否停顿，若未停顿，则下拉菜单不变，此时菜单3不响应鼠标事件，鼠标可以直接斜向移动至目标下拉菜单下拉2m-1；如果鼠标移动过程出现停顿，菜单3立即响应鼠标事件，此时下拉菜单变为菜单3的下拉菜单。
如果鼠标移动后的新位置为黑色圆点A2(Xx2，Yy2)，其中Xx2＜Xx，Qq＜Yy2＜Yy，鼠标位置变化量为ΔX＝Xx2-Xx，ΔY＝Yy2-Yy，A2相对于A的斜率变化为k＝ΔY/ΔX。线段AB的斜率k1＝(Nn-Yy)/(Mm-Xx)＞0，线段AC的斜率k2＝(Qq-Yy)/(Pp-Xx)＜0，通过比较斜率可以判断出A2不在线段AB下方和线段AC上方的特定区域；数据更新，菜单4立即响应鼠标事件，此时下拉菜单变为菜单4的下拉菜单，接着再次执行本发明方法。
图3为本发明所提供的一种分类导航的下拉菜单设计实现方法的实施例二，如图3所示，右侧为分类导航菜单：菜单1、菜单2、菜单3、菜单4、...、菜单n-1，菜单n；左侧显示为菜单对应的下拉菜单，在图3中鼠标移动到菜单n-1，故为菜单n-1的下拉菜单：下拉(n-1)1、下拉(n-1)2、下拉(n-1)3、下拉(n-1)4、...、下拉(n-1)m-1，下拉(n-1)m，当前目标下拉菜单为下拉(n-1)3。
该实施过程如下：
监听到鼠标移动到菜单n-1，获取鼠标的位置A(Xx，Yy)和菜单n-1的下拉菜单位置B(Mm，Nn)，C(Pp，Qq)，Mm＝Pp；计算鼠标的位移量：如果鼠标移动后的新位置为黑色圆点A1′(Xx1，Yy1)，其中Mm＜Xx1＜Xx，Yy＜Yy1＜Nn，鼠标位置变化量为ΔX＝Xx1-Xx，ΔY＝Yy1-Yy，A1′相对于A的斜率变化为k＝ΔY/ΔX。线段AB的斜率k1＝(Nn-Yy)/(Mm-Xx)＜0，线段AC的斜率k2＝(Qq-Yy)/(Pp-Xx)＞0，通过比较斜率可以判断出A1′在线段AB下方和线段AC上方的特定区域；进一步，监听鼠标移动过程是否停顿，若未停顿，则下拉菜单不变，此时菜单4不响应鼠标事件，鼠标可以直接斜向移动至目标下拉菜单下拉(n-1)3；如果鼠标移动过程出现停顿，菜单4立即响应鼠标事件，此时下拉菜单变为菜单4的下拉菜单。
如果鼠标移动后的新位置为黑色圆点A2′(Xx2，Yy2)，其中Mm＜Xx2＜Xx，Yy＜Yy2＜Nn，鼠标位置变化量为ΔX＝Xx2-Xx，ΔY＝Yy2-Yy，A2′相对于A的斜率变化为k＝ΔY/ΔX。线段AB的斜率k1＝(Nn-Yy)/(Mm-Xx)＜0，线段AC的斜率k2＝(Qq-Yy)/(Pp-Xx)＞0，通过比较斜率可以判断出A2′不在线段AB下方和线段AC上方的特定区域；数据更新，菜单3立即响应鼠标事件，此时下拉菜单变为菜单3的下拉菜单，接着再次执行本发明方法。
以上所述是对本发明的较佳的具体实施方式，本技术领域人员应当理解，所述实施方式并非限定本发明的保护范围。在不脱离本发明的精神实质和原则下，在细节方面可以进行变化或者修改，均应涵盖在本发明的权利要求范围之内。

Claims (4)

1.一种分类导航的下拉菜单设计实现方法，其特征在于，该方法包括以下步骤：
a.实时监听鼠标在分类导航菜单内的移动事件，获取菜单的相关位置数据，包括菜单上的鼠标位置A(Xx，Yy)，和其下拉菜单的位置B(Mm，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为下拉子菜单标签的右上角和右下角。
CN201310099005.XA 2013-03-27 2013-03-27 一种分类导航的下拉菜单设计实现方法 Pending CN104077115A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201310099005.XA CN104077115A (zh) 2013-03-27 2013-03-27 一种分类导航的下拉菜单设计实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310099005.XA CN104077115A (zh) 2013-03-27 2013-03-27 一种分类导航的下拉菜单设计实现方法

Publications (1)

Publication Number Publication Date
CN104077115A true CN104077115A (zh) 2014-10-01

Family

ID=51598390

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310099005.XA Pending CN104077115A (zh) 2013-03-27 2013-03-27 一种分类导航的下拉菜单设计实现方法

Country Status (1)

Country Link
CN (1) CN104077115A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107506115A (zh) * 2016-06-14 2017-12-22 阿里巴巴集团控股有限公司 一种菜单的显示处理方法、装置及***
CN114115562A (zh) * 2021-11-29 2022-03-01 东软集团股份有限公司 事件监听方法、装置、介质及电子设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1920761A (zh) * 2005-08-26 2007-02-28 国际商业机器公司 下拉式菜单显示方法及设备
CN100472417C (zh) * 2004-08-16 2009-03-25 微软公司 用于选择与选定对象相关的选择软件功能控件的用户界面
US7941765B2 (en) * 2008-01-23 2011-05-10 Wacom Co., Ltd System and method of controlling variables using a radial control menu
CN102449588A (zh) * 2009-05-29 2012-05-09 苹果公司 放射式菜单

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN100472417C (zh) * 2004-08-16 2009-03-25 微软公司 用于选择与选定对象相关的选择软件功能控件的用户界面
CN1920761A (zh) * 2005-08-26 2007-02-28 国际商业机器公司 下拉式菜单显示方法及设备
US7941765B2 (en) * 2008-01-23 2011-05-10 Wacom Co., Ltd System and method of controlling variables using a radial control menu
CN102449588A (zh) * 2009-05-29 2012-05-09 苹果公司 放射式菜单

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107506115A (zh) * 2016-06-14 2017-12-22 阿里巴巴集团控股有限公司 一种菜单的显示处理方法、装置及***
CN114115562A (zh) * 2021-11-29 2022-03-01 东软集团股份有限公司 事件监听方法、装置、介质及电子设备

Similar Documents

Publication Publication Date Title
EP2717145B1 (en) Apparatus and method for switching split view in portable terminal
US9304668B2 (en) Method and apparatus for customizing a display screen of a user interface
KR101381484B1 (ko) 그래픽 오브젝트 플로팅 기능을 갖는 모바일 디바이스 및 그 실행 방법
US20130080951A1 (en) Device and method for moving icons across different desktop screens and related computer readable storage media comprising computer executable instructions
EP2677414A2 (en) Information display apparatus and method of user device
WO2012102813A1 (en) Gesture-based menu controls
CN103324436B (zh) 一种任务处理方法及装置
JP2017504877A (ja) フローティングタッチに基づくクリックオブジェクト拡大のための方法および装置
CN103809853A (zh) 一种信息处理方法及电子设备
CN104077036A (zh) 一种分类导航的下拉菜单设计实现方法
CN106648314A (zh) 一种分屏方法及装置
CN103227857A (zh) 一种移动客户端中消息的显示方法和装置
CN103473014A (zh) 一种多任务切换方法和终端
CN103809886B (zh) 一种光标定位方法及移动终端
US20140351749A1 (en) Methods, apparatuses and computer program products for merging areas in views of user interfaces
CN103176704A (zh) 快速找出需进行操作的功能菜单开关的方法及其终端
CN102681748B (zh) 一种信息处理设备以及信息处理方法
CN105095259B (zh) 瀑布流对象显示方法及装置
CN103488424A (zh) 一种信息展示的方法及装置
CN105549830A (zh) 智能显示的方法及装置
EP3043251A1 (en) Method of displaying content and electronic device implementing same
CN104077115A (zh) 一种分类导航的下拉菜单设计实现方法
CN104503995A (zh) 输入法的实现方法和装置
CN103500055A (zh) 一种触摸屏的显示内容定位方法、***
CN104978135A (zh) 一种图标显示方法、装置及移动终端

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20141001