CN104077036B - A kind of drop-down menu design implementation method of classified navigation - Google Patents
A kind of drop-down menu design implementation method of classified navigation Download PDFInfo
- Publication number
- CN104077036B CN104077036B CN201310099602.2A CN201310099602A CN104077036B CN 104077036 B CN104077036 B CN 104077036B CN 201310099602 A CN201310099602 A CN 201310099602A CN 104077036 B CN104077036 B CN 104077036B
- Authority
- CN
- China
- Prior art keywords
- drop
- menu
- mouse
- down menu
- delta
- 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.)
- Active
Links
Landscapes
- User Interface Of Digital Computer (AREA)
- Digital Computer Display Output (AREA)
Abstract
The present invention proposes a kind of drop-down menu design implementation method of classified navigation, and this method comprises the following steps：A. mouse moving event is monitored in real time, obtains the related data of target menu；B. the delta-shaped region ABC that structure mouse can be moved quickly；C. regions shield, the menu of shielding delta-shaped region ABC coverings；D. mouse moves quickly through delta-shaped region ABC, selection target drop-down menu.Compared with prior art, the present invention realizes drop-down menu quick response simultaneous display, eliminates the influence that delay display is brought, improves browse efficiency；User using when can sideling move mouse to drop-down menu and drop-down menu and do not disappear, enhance Consumer's Experience.
Description
Technical field
The present invention relates to computer application field, the drop-down menu design implementation method of more particularly to a kind of classified navigation.
Background technology
In computer application, for drop-down menu, after user chooses an option, the option can be extended downwardly and provided
There is another menu of other options.Pull-down menu is commonly used to the function that some have same category to be placed on same
In pull-down menu, and this drop-down menu is placed under the option of main menu.The drop-down menu design of classified navigation is to be based on
The functional characteristics of drop-down menu, substantial amounts of information is progressively segmented and sorted out, shows user more in limited space
Information.
Traditional classified navigation drop-down menu shows that drop-down menu has certain delay, if because not doing that, sideling moves
Mouse event disappears during dynamic mouse, and drop-down menu will disappear, and generally requires first translate mouse to drop-down dish for a user
It is single, then could in drop down menu list selection target submenu.But had a problem that using the method for delay, that is, work as mouse
Because its drop-down menu of time delay is unable to simultaneous display when mark is moved to certain menu.For example, it is assumed that have in classified navigation
10 main menus, when mouse is continuous quickly from during menu 1 drags to menu 10, may there was only 3 to 4 menu response mouse
Mark event shows drop-down menu, and other menus then have little time to respond.
The drop-down menu of current web classified navigation is used very frequent, if drop-down menu delay display, user
Fast browsing is unable to target information, have impact on the usage experience of user；And user can only move horizontally mouse to drop-down menu,
Then change direction to target submenu, and can not sideling move mouse and directly arrive target submenu again.
The content of the invention
Problem present in drop-down menu for existing classified navigation, the present invention are proposed under a kind of classified navigation
Menu design implementation method is drawn, monitors mouse moving event, obtains the related data of target menu, structure mouse can be moved quickly
Delta-shaped region, regions shield, selection target drop-down submenu.
To realize foregoing invention content, present invention employs a kind of drop-down menu of classified navigation to design implementation method, should
Method comprises the following steps：
A. moving event of the mouse in classified navigation menu is monitored in real time, obtains the related data of target menu, including
Mouse position A (X on menux, Yy), the position B (M of its drop-down menum, Nn), C (Pp, Qq)；
B. build mouse can quick moving area, A, B, C, form the triangle that arbitrarily can quickly move of a mouse at 3 points
Region ABC；
C. regions shield, the same level menu event of the target menu of shielding delta-shaped region ABC coverings, makes mouse three
Its same level menu is not responding to when quick mobile in angular domain ABC；
D. mouse moves quickly through delta-shaped region ABC, selection target drop-down menu.
Further, if mouse pauses when quick mobile in delta-shaped region ABC, function of shielding disappears, and responds mouse
Mark moving event and obtain new data, rebuild the delta-shaped region that mouse can be moved quickly；If mouse is not in delta
Moved in the ABC of domain, former delta-shaped region disappears, and response mouse moving event obtains new data, and rebuilding mouse can be quick
Mobile delta-shaped region.
Further, the implementation of the function of shielding is：According to data message, in-time generatin pictorial delta-shaped region
ABC, when listening to mouse quick movement in delta-shaped region ABC, picture is automatically placed in the same level menu of target menu
Top, it is set to cannot respond to mouse event；When listening to mouse and pausing, change is placed in the lower section of menu to picture automatically,
Target menu changes, summary responses mouse moving event.
Further, when delta-shaped region ABC changes, the content of the drop-down menu of simultaneous display activation.
Further, the response time of mouse pause is pre-set according to user's use demand.
Further, position B, C of the drop-down menu are the upper left corner and the lower left corner of drop-down menu label.
Further, position B, C of the drop-down menu are the upper right corner and the lower right corner of drop-down menu label.
Further, the delta-shaped region ABC is that user is invisible.
Further, the delta-shaped region ABC is that user is visible, and its frame or area are shown with the color for being different from menu
Domain.
Compared with prior art, the present invention realizes drop-down menu quick response simultaneous display, eliminates delay and shows band
The influence come, improves browse efficiency；User using when can sideling move mouse to drop-down menu and drop-down menu and do not disappear, increase
Strong Consumer's Experience.
Brief description of the drawings
Fig. 1 is that a kind of drop-down menu of classified navigation provided by the present invention designs the flow chart of implementation method；
Fig. 2 a, 2b are that a kind of drop-down menu of classified navigation provided by the present invention designs the embodiment one of implementation method；
Fig. 3 a, 3b are that a kind of drop-down menu of classified navigation provided by the present invention designs the embodiment two of implementation method.
Embodiment
In order that the drop-down menu design implementation method and its advantage of a kind of classified navigation that the present invention is previously mentioned are more clear
Chu is clear and definite, and the present invention is further described in detail referring to the drawings.
Fig. 1 is that a kind of drop-down menu of classified navigation provided by the present invention designs the flow chart of implementation method, such as Fig. 1 institutes
Show, the main process flow steps of this method are as follows：
Step 1, mouse moving event is monitored in real time, obtains the related data of target menu.
Moving event of the mouse in classified navigation menu is monitored in real time, and obtaining related data includes the mouse position on menu
Put A (Xx, Yy), the position B (M of its drop-down menum, Nn), C (Pp, Qq), wherein subscriptx、y、m、n、p、qFor variable, with mouse and under
Draw the change in location of menu and change.
Step 2, the delta-shaped region ABC that structure mouse can be moved quickly.
A, B, C in step 1, form the delta-shaped region ABC that a mouse arbitrarily can be moved quickly at 3 points.According to use
Demand, the region can be visible or show its frame or region with the color for being different from menu.
Step 3, regions shield, the menu of shielding delta-shaped region ABC coverings.
The same level menu event of the target menu of delta-shaped region ABC coverings is shielded, makes mouse in delta-shaped region ABC
Its same level menu is not responding to when interior quick mobile.Using the present invention, mouse when delta-shaped region ABC is arbitrarily quickly moved,
If unshielded function, menu meeting real-time response mouse moving event simultaneously shows drop-down menu content, and this just brings the problem of new, by
Shown in drop-down menu without delay, change is too fast, and user can not choose target submenu.
Step 4, mouse moves quickly through delta-shaped region ABC, selection target drop-down menu.
Because step 3 realizes the function of shielding, mouse oblique can be moved to target drop-down dish in delta-shaped region ABC
Single, without first levels operation, adjustment direction moves again.
Further, disappeared in mouse moving process if there is pause, function of shielding, the current set of menu response mouse movement thing
Part, drop-down menu synchronously change and shown, re-execute the inventive method.
Target menu changes, and mouse is moved to new target menu, performs the inventive method again.
Fig. 2 a, 2b are that a kind of drop-down menu of classified navigation provided by the present invention designs the embodiment one of implementation method,
As shown in Figure 2 a, left side is classified navigation menu：Menu 1, menu 2, menu 3, menu 4 ..., menu n-1, menu n；Right side
Drop-down menu corresponding to menu is shown as, mouse is moved to menu 2 in fig. 2 a, therefore is the drop-down menu of menu 2：Drop-down 21,
Drop-down 22, drop-down 23, drop-down 24 ..., drop-down 2m-1, pull down m；Target drop-down menu is drop-down 2m-1.
The implementation process is as follows：Listen to mouse and be moved to menu 2, obtain the position A (X of mousex, Yy) and menu 2 under
Draw menu position B (Mm, Nn), C (Pp, Qq)；The delta-shaped region ABC that structure mouse can be moved quickly, delta-shaped region ABC are
The picture format of in-time generatin, when listening to mouse quick movement in delta-shaped region ABC, the picture also covers in addition to menu 2
Leaf mustard list 1, menu 3, menu 4, the part of menu ..., picture ABC are automatically placed in it and cover the top of menu, make it capped
Part cannot respond to mouse event；Direction of the mouse along arrow S moves quickly into target drop-down menu drop-down 2m-1, certainly,
As long as in delta-shaped region ABC, mouse can also be moved to target drop-down menu drop-down 2m-1 along other directions.
Fig. 2 b pause when listening to mouse and be moved to during movement at the black origin of menu 3, picture ABC
It is automatically placed in it and covers the lower section of menu, function of shielding disappears, and the drop-down menu of menu 2 disappears, and now menu 3 can summary responses
Mouse moving event, drop-down menu can also be changing into the drop-down menu of menu 3 simultaneously, and (to be compareed with Fig. 2 a, picture is placed in drop-down
The lower section of menu), now drop-down menu be changed into drop-down 31, drop-down 32, drop-down 33, drop-down 34 ..., drop-down 3m-1, pull down 3m.
Fig. 3 a, 3b are that a kind of drop-down menu of classified navigation provided by the present invention designs the embodiment two of implementation method,
As shown in Figure 3 a, right side is classified navigation menu：Menu 1, menu 2, menu 3, menu 4 ..., menu n-1, menu n；Left side
Drop-down menu corresponding to menu is shown as, mouse is moved to menu n-1 in fig. 3 a, therefore is menu n-1 drop-down menu：Drop-down
(n-1) 1, drop-down (n-1) 2, drop-down (n-1) 3, drop-down (n-1) 4 ..., drop-down (n-1) m-1, pull down (n-1) m；Target pulls down
Menu is drop-down (n-1) 3.
The implementation process is as follows：Listen to mouse and be moved to menu n-1, obtain the position A (X of mousex, Yy) and menu n-1
Drop-down menu position B (Mm, Nn), C (Pp, Qq)；The delta-shaped region ABC that structure mouse can be moved quickly, delta-shaped region
ABC is the picture format of in-time generatin, should in addition to menu n-1 when listening to mouse quick movement in delta-shaped region ABC
Picture also covers menu 2, menu 3, menu 4, menu ..., menu n part, and picture ABC is automatically placed in it and covers the upper of menu
Side, makes its covered portions cannot respond to mouse event；Direction of the mouse along arrow S is moved quickly under target drop-down menu
(n-1) 3 is drawn, certainly, as long as in delta-shaped region ABC, mouse can also be moved to the drop-down of target drop-down menu along other directions
(n-1)3。
Fig. 3 b pause when listening to mouse and be moved to during movement at the black origin of menu 4, picture ABC
It is automatically placed in it and covers the lower section of menu, function of shielding disappears, and menu n-1 drop-down menu disappears, and now menu 4 can ring immediately
Answer mouse moving event, drop-down menu can also be changing into the drop-down menu of menu 4 simultaneously, and (to be compareed with Fig. 3 a, picture is placed in down
Draw menu lower section), now drop-down menu be changed into drop-down 41, drop-down 42, drop-down 43, drop-down 44 ..., drop-down 4m-1, drop-down
4m。
Described above is the preferable embodiment to the present invention, and those skilled in the art should be appreciated that the reality
Apply mode and non-limiting protection scope of the present invention., can in terms of details in the case where not departing from the Spirit Essence and principle of the present invention
To be changed or change, all should cover within scope of the presently claimed invention.
Claims (8)
1. the drop-down menu design implementation method of a kind of classified navigation, it is characterised in that this method comprises the following steps：
A. moving event of the mouse in classified navigation menu is monitored in real time, obtains the related data of target menu, including menu
On mouse position A (Xx,Yy), the position B (M of its drop-down menum,Nn), C (Pp,Qq)；
B. build mouse can quick moving area, A, B, C, form the delta-shaped region that arbitrarily can quickly move of a mouse at 3 points
ABC；
C. regions shield, the same level menu event of the target menu of shielding delta-shaped region ABC coverings, makes mouse in triangle
Its same level menu is not responding to when quick mobile in the ABC of region；
D. mouse moves quickly through delta-shaped region ABC, selection target drop-down menu；
Wherein, the implementation of the function of shielding is：According to data message, in-time generatin pictorial delta-shaped region ABC, when
Listening to mouse, picture is automatically placed in the top of the same level menu of target menu during quick movement in delta-shaped region ABC,
It is set to cannot respond to mouse event；When listening to mouse and pausing, change is placed in the lower section of menu, target dish to picture automatically
Altered, summary responses mouse moving event.
A kind of 2. drop-down menu design implementation method of classified navigation as claimed in claim 1, if mouse is in delta-shaped region
Paused when quick mobile in ABC, function of shielding disappears, and response mouse moving event obtains new data, rebuilds mouse
Mark the delta-shaped region that can quickly move；If mouse does not move in delta-shaped region ABC, former delta-shaped region disappears, response
Mouse moving event obtains new data, rebuilds the delta-shaped region that mouse can be moved quickly.
3. a kind of drop-down menu design implementation method of classified navigation as claimed in claim 2, delta-shaped region ABC changes
When, the content of the drop-down menu of simultaneous display activation.
4. a kind of drop-down menu design implementation method of classified navigation as claimed in claim 2, pre- according to user's use demand
The response time for first setting mouse to pause.
5. a kind of drop-down menu design implementation method of classified navigation as claimed in claim 1, the position of the drop-down menu
B, C is the upper left corner and the lower left corner of drop-down menu label.
6. a kind of drop-down menu design implementation method of classified navigation as claimed in claim 1, the position of the drop-down menu
B, C is the upper right corner and the lower right corner of drop-down menu label.
7. a kind of drop-down menu design implementation method of classified navigation as claimed in claim 1 or 2, the delta-shaped region
ABC is that user is invisible.
8. a kind of drop-down menu design implementation method of classified navigation as claimed in claim 1 or 2, the delta-shaped region
ABC is that user is visible, and its frame or region are shown with the color for being different from menu.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310099602.2A CN104077036B (en) | 2013-03-27 | 2013-03-27 | A kind of drop-down menu design implementation method of classified navigation |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310099602.2A CN104077036B (en) | 2013-03-27 | 2013-03-27 | A kind of drop-down menu design implementation method of classified navigation |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104077036A CN104077036A (en) | 2014-10-01 |
| CN104077036B true CN104077036B (en) | 2017-11-10 |
Family
ID=51598334
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310099602.2A Active CN104077036B (en) | 2013-03-27 | 2013-03-27 | A kind of drop-down menu design implementation method of classified navigation |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104077036B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111813468A (en) * | 2015-04-03 | 2020-10-23 | 阿里巴巴集团控股有限公司 | Method and device for shielding webpage operation and electronic equipment |
| CN107506115A (en) * | 2016-06-14 | 2017-12-22 | 阿里巴巴集团控股有限公司 | A kind of display processing method of menu, apparatus and system |
| CN107765957B (en) * | 2017-09-04 | 2019-12-31 | 武汉票据交易中心有限公司 | Drop-down menu and display control method and system of arrow thereof |
| CN110069188B (en) * | 2019-03-08 | 2021-01-29 | 维沃移动通信有限公司 | Identification display method and terminal equipment |
| CN113589994A (en) * | 2021-07-30 | 2021-11-02 | 恒生电子股份有限公司 | Display control method, device and equipment of navigation menu and storage medium |
| CN116860137B (en) * | 2023-08-29 | 2023-12-05 | 中航金网(北京)电子商务有限公司 | Multi-level menu display method and device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1790244A (en) * | 2004-08-16 | 2006-06-21 | 微软公司 | User interface for displaying selectable software functionality controls that are relevant to a selected object |
| CN1920761A (en) * | 2005-08-26 | 2007-02-28 | 国际商业机器公司 | Pull down menu display method and device |
| CN101566910A (en) * | 2008-04-21 | 2009-10-28 | 株式会社和冠 | Radial control menu, graphical user interface, method of controlling variables |
| CN102449588A (en) * | 2009-05-29 | 2012-05-09 | 苹果公司 | Radial menus |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130019175A1 (en) * | 2011-07-14 | 2013-01-17 | Microsoft Corporation | Submenus for context based menu system |
-
2013
- 2013-03-27 CN CN201310099602.2A patent/CN104077036B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1790244A (en) * | 2004-08-16 | 2006-06-21 | 微软公司 | User interface for displaying selectable software functionality controls that are relevant to a selected object |
| CN1920761A (en) * | 2005-08-26 | 2007-02-28 | 国际商业机器公司 | Pull down menu display method and device |
| CN101566910A (en) * | 2008-04-21 | 2009-10-28 | 株式会社和冠 | Radial control menu, graphical user interface, method of controlling variables |
| CN102449588A (en) * | 2009-05-29 | 2012-05-09 | 苹果公司 | Radial menus |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104077036A (en) | 2014-10-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104077036B (en) | A kind of drop-down menu design implementation method of classified navigation | |
| AU2017204611B2 (en) | Widget setting method and terminal device | |
| US9304668B2 (en) | Method and apparatus for customizing a display screen of a user interface | |
| US10078421B2 (en) | User terminal apparatus and method of controlling the same | |
| US9747010B2 (en) | Electronic content visual comparison apparatus and method | |
| EP2871560B1 (en) | Image processing method and apparatus | |
| CN105487742A (en) | Method and device for displaying plurality of application windows | |
| CN105278818B (en) | Content copying methods and device in a kind of instant message applications | |
| WO2012025669A1 (en) | Methods and apparatuses for facilitating content navigation | |
| WO2016205247A1 (en) | Methods and systems for reducing inadvertent interactions with advertisements displayed on a computing device | |
| US20100097339A1 (en) | Image processing apparatus, image processing method, and program | |
| EP4174627A1 (en) | Page display method and apparatus, storage medium, and electronic device | |
| US20140123036A1 (en) | Touch screen display process | |
| CN104065816A (en) | Rotating disc type navigation menu device and implementing method thereof | |
| WO2022222672A1 (en) | Multi-content parallel display method and apparatus, terminal, medium, and program product | |
| US9880726B2 (en) | Fragmented scrolling of a page | |
| CN110909274B (en) | Page browsing method and device and electronic equipment | |
| US11579766B2 (en) | Methods and systems for reducing inadvertent interactions with advertisements displayed on a computing device | |
| CN113648649A (en) | Game interface control method and device, computer readable medium and terminal equipment | |
| WO2018223593A1 (en) | Method and device for presenting segment view, and user terminal | |
| CN105988702A (en) | Method and system for viewing object picture | |
| CN104978171A (en) | Output method and device of recognizable identifier | |
| WO2011083676A1 (en) | Object processing device and object selection method | |
| CN108415660A (en) | A kind of split screen multiple point touching implementation method based on screen interaction shopping | |
| CN105022734A (en) | Background color setting method and background color setting device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |