一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法
【專利摘要】本發(fā)明提出了一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，該方法包括以下步驟：a.實(shí)時(shí)監(jiān)聽鼠標(biāo)移動(dòng)事件，獲取目標(biāo)菜單的相關(guān)數(shù)據(jù)；b.構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域ABC；c.區(qū)域屏蔽，屏蔽三角形區(qū)域ABC覆蓋的菜單；d.鼠標(biāo)快速移動(dòng)通過三角形區(qū)域ABC，選擇目標(biāo)下拉菜單。與現(xiàn)有技術(shù)相比，本發(fā)明實(shí)現(xiàn)了下拉菜單快速響應(yīng)同步顯示，消除了延遲顯示帶來的影響，提高了瀏覽效率；用戶使用時(shí)可斜著移動(dòng)鼠標(biāo)至下拉菜單且下拉菜單不消失，增強(qiáng)了用戶體驗(yàn)。
【專利說明】一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)應(yīng)用領(lǐng)域，特別涉及一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法。

【背景技術(shù)】
[0002]在計(jì)算機(jī)應(yīng)用中，對(duì)于下拉菜單，當(dāng)用戶選中一個(gè)選項(xiàng)后，該選項(xiàng)會(huì)向下延伸出具有其他選項(xiàng)的另一個(gè)菜單。下拉式菜單通常應(yīng)用于把一些具有相同分類的功能放在同一個(gè)下拉式菜單中，并把這個(gè)下拉菜單置于主菜單的選項(xiàng)下。分類導(dǎo)航的下拉菜單設(shè)計(jì)是基于下拉菜單的功能特點(diǎn)，把大量的信息逐步細(xì)分和歸類，在有限的空間內(nèi)展示給用戶更多的信息。
[0003]傳統(tǒng)的分類導(dǎo)航下拉菜單顯示下拉菜單有一定的延遲，因?yàn)槿舨贿@樣做，斜著移動(dòng)鼠標(biāo)時(shí)鼠標(biāo)事件消失，下拉菜單就會(huì)消失，對(duì)于用戶來說一般需要先平移鼠標(biāo)到下拉菜單，然后才能在下拉菜單列表中選擇目標(biāo)子菜單。但采用延遲的方法存在一個(gè)問題，即當(dāng)鼠標(biāo)移動(dòng)至某菜單時(shí)因?yàn)闀r(shí)間延遲其下拉菜單不能同步顯示。舉個(gè)例子，假設(shè)分類導(dǎo)航中有10個(gè)主菜單，當(dāng)鼠標(biāo)連續(xù)快速從菜單I拖動(dòng)到菜單10的過程中,可能只有3到4個(gè)菜單響應(yīng)鼠標(biāo)事件顯示下拉菜單，而其他菜單則來不及響應(yīng)。
[0004]目前網(wǎng)站分類導(dǎo)航的下拉菜單被使用得非常頻繁，若下拉菜單延遲顯示，則用戶不能快速瀏覽到目標(biāo)信息，影響了用戶的使用體驗(yàn)；且用戶只能水平移動(dòng)鼠標(biāo)至下拉菜單，然后再變化方向到目標(biāo)子菜單，而不能斜著移動(dòng)鼠標(biāo)直接到目標(biāo)子菜單。


【發(fā)明內(nèi)容】

[0005]針對(duì)現(xiàn)有的分類導(dǎo)航的下拉菜單中存在的問題，本發(fā)明提出了一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，監(jiān)聽鼠標(biāo)移動(dòng)事件，獲取目標(biāo)菜單的相關(guān)數(shù)據(jù)，構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域，區(qū)域屏蔽，選擇目標(biāo)下拉子菜單。
[0006]為實(shí)現(xiàn)上述
【發(fā)明內(nèi)容】
，本發(fā)明采用了一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，該方法包括以下步驟:
[0007]a.實(shí)時(shí)監(jiān)聽鼠標(biāo)在分類導(dǎo)航菜單內(nèi)的移動(dòng)事件，獲取目標(biāo)菜單的相關(guān)數(shù)據(jù)，包括菜單上的鼠標(biāo)位置A (Xx，Yy)，其下拉菜單的位置B (Mm，Nn)，C (Pp, Qq)；
[0008]b.構(gòu)建鼠標(biāo)可快速移動(dòng)區(qū)域，A、B、C三點(diǎn)，構(gòu)成一個(gè)鼠標(biāo)可任意快速移動(dòng)的三角形區(qū)域ABC ；
[0009]c.區(qū)域屏蔽，屏蔽三角形區(qū)域ABC覆蓋的目標(biāo)菜單的同級(jí)別菜單事件，使鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)其同級(jí)別菜單不響應(yīng)；
[0010]d.鼠標(biāo)快速移動(dòng)通過三角形區(qū)域ABC，選擇目標(biāo)下拉菜單。
[0011]進(jìn)一步，若鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)出現(xiàn)停頓，屏蔽功能消失，響應(yīng)鼠標(biāo)移動(dòng)事件獲取新的數(shù)據(jù)，重新構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域；若鼠標(biāo)不在三角形區(qū)域ABC內(nèi)移動(dòng)，原三角形區(qū)域消失，響應(yīng)鼠標(biāo)移動(dòng)事件獲取新的數(shù)據(jù)，重新構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域。
[0012]進(jìn)一步，所述屏蔽功能的實(shí)現(xiàn)方式為:根據(jù)數(shù)據(jù)信息，即時(shí)生成圖片式三角形區(qū)域ABC，當(dāng)監(jiān)聽到鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)圖片自動(dòng)置于目標(biāo)菜單的同級(jí)別菜單的上方，使其無法響應(yīng)鼠標(biāo)事件；當(dāng)監(jiān)聽到鼠標(biāo)出現(xiàn)停頓時(shí)，圖片自動(dòng)變化置于菜單的下方，目標(biāo)菜單變化，即時(shí)響應(yīng)鼠標(biāo)移動(dòng)事件。
[0013]進(jìn)一步，三角形區(qū)域ABC變化時(shí)，同步顯示激活的下拉菜單的內(nèi)容。
[0014]進(jìn)一步，根據(jù)用戶使用需求預(yù)先設(shè)置鼠標(biāo)停頓的響應(yīng)時(shí)間。
[0015]進(jìn)一步，所述下拉菜單的位置B、C為下拉菜單標(biāo)簽的左上角和左下角。
[0016]進(jìn)一步，所述下拉菜單的位置B、C為下拉菜單標(biāo)簽的右上角和右下角。
[0017]進(jìn)一步，所述三角形區(qū)域ABC為用戶不可見。
[0018]進(jìn)一步，所述三角形區(qū)域ABC為用戶可見，用區(qū)別于菜單的顏色顯示其邊框或區(qū)域。
[0019]與現(xiàn)有技術(shù)相比，本發(fā)明實(shí)現(xiàn)了下拉菜單快速響應(yīng)同步顯示，消除了延遲顯示帶來的影響，提高了瀏覽效率；用戶使用時(shí)可斜著移動(dòng)鼠標(biāo)至下拉菜單且下拉菜單不消失，增強(qiáng)了用戶體驗(yàn)。

【專利附圖】

【附圖說明】
[0020]圖1為本發(fā)明所提供的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法的流程圖；
[0021]圖2a，2b為本發(fā)明所提供的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法的實(shí)施例一；
[0022]圖3a，3b為本發(fā)明所提供的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法的實(shí)施例二。

【具體實(shí)施方式】
[0023]為了使本發(fā)明所提到的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法及其優(yōu)點(diǎn)更加清楚明確，以下參照附圖對(duì)本發(fā)明進(jìn)行更進(jìn)一步的詳細(xì)說明。
[0024]圖1為本發(fā)明所提供的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法的流程圖，如圖1所示，該方法的主要流程步驟如下:
[0025]步驟1，實(shí)時(shí)監(jiān)聽鼠標(biāo)移動(dòng)事件，獲取目標(biāo)菜單的相關(guān)數(shù)據(jù)。
[0026]實(shí)時(shí)監(jiān)聽鼠標(biāo)在分類導(dǎo)航菜單內(nèi)的移動(dòng)事件，獲取相關(guān)數(shù)據(jù)包括菜單上的鼠標(biāo)位置A(Xx，Yy)，其下拉菜單的位置B(Mm，Nn) ,C(Pp, Qq)，其中下標(biāo)x、y、m、n、p、q為變量，隨著鼠標(biāo)和下拉菜單的位置變化而變化。
[0027]步驟2，構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域ABC。
[0028]步驟I中的A、B、C三點(diǎn)，構(gòu)成一個(gè)鼠標(biāo)可任意快速移動(dòng)的三角形區(qū)域ABC。根據(jù)使用需求，該區(qū)域可以是可見的，也可以是用區(qū)別于菜單的顏色顯示其邊框或區(qū)域。
[0029]步驟3，區(qū)域屏蔽，屏蔽三角形區(qū)域ABC覆蓋的菜單。
[0030]屏蔽三角形區(qū)域ABC覆蓋的目標(biāo)菜單的同級(jí)別菜單事件，使鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)其同級(jí)別菜單不響應(yīng)。采用本發(fā)明，鼠標(biāo)在三角形區(qū)域ABC任意快速移動(dòng)時(shí)，若無屏蔽功能，菜單會(huì)實(shí)時(shí)響應(yīng)鼠標(biāo)移動(dòng)事件并顯示下拉菜單內(nèi)容，這就帶來新的問題，由于下拉菜單無延遲顯示，變化太快，用戶無法選中目標(biāo)子菜單。
[0031]步驟4，鼠標(biāo)快速移動(dòng)通過三角形區(qū)域ABC，選擇目標(biāo)下拉菜單。
[0032]由于步驟3實(shí)現(xiàn)了屏蔽的功能，鼠標(biāo)在三角形區(qū)域ABC內(nèi)可斜向移動(dòng)至目標(biāo)下拉菜單，不用先水平操作再調(diào)整方向移動(dòng)。
[0033]進(jìn)一步，鼠標(biāo)移動(dòng)過程中如果出現(xiàn)停頓，屏蔽功能消失，當(dāng)前菜單響應(yīng)鼠標(biāo)移動(dòng)事件，下拉菜單同步變化并顯示，重新執(zhí)行本發(fā)明方法。
[0034]目標(biāo)菜單變化，鼠標(biāo)移動(dòng)至新的目標(biāo)菜單，再次執(zhí)行本發(fā)明方法。
[0035]圖2a，2b為本發(fā)明所提供的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法的實(shí)施例一，
如圖2a所示，左側(cè)為分類導(dǎo)航菜單:菜單1、菜單2、菜單3、菜單4.....菜單n_l，菜單η ；
右側(cè)顯示為菜單對(duì)應(yīng)的下拉菜單，在圖2a中鼠標(biāo)移動(dòng)到菜單2，故為菜單2的下拉菜單:下拉21、下拉22、下拉23、下拉24.....下拉2m_l，下拉m ；目標(biāo)下拉菜單為下拉2m_l。
[0036]該實(shí)施過程如下:監(jiān)聽到鼠標(biāo)移動(dòng)到菜單2，獲取鼠標(biāo)的位置A(Xx，Yy)和菜單2的下拉菜單位置B(Mm，Nn), C(Pp, Qq);構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域ABC，三角形區(qū)域ABC為即時(shí)生成的圖片格式，當(dāng)監(jiān)聽到鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)該圖片除菜單2外還覆蓋菜單1、菜單3、菜單4、菜單...的部分，圖片ABC自動(dòng)置于其覆蓋菜單的上方，使其被覆蓋部分無法響應(yīng)鼠標(biāo)事件；鼠標(biāo)沿著箭頭S的方向快速移動(dòng)到目標(biāo)下拉菜單下拉2m-l，當(dāng)然，只要在三角形區(qū)域ABC內(nèi)，鼠標(biāo)也可沿其他方向移動(dòng)至目標(biāo)下拉菜單下拉2 In-1 ο
[0037]圖2b當(dāng)監(jiān)聽到鼠標(biāo)在移動(dòng)的過程中移動(dòng)到菜單3的黑色原點(diǎn)處出現(xiàn)停頓，圖片ABC自動(dòng)置于其覆蓋菜單的下方，屏蔽功能消失，菜單2的下拉菜單消失，此時(shí)菜單3會(huì)即時(shí)響應(yīng)鼠標(biāo)移動(dòng)事件，下拉菜單也會(huì)同時(shí)變化成菜單3的下拉菜單(為與圖2a對(duì)照，圖片置于下拉菜單的下方)，此時(shí)下拉菜單變?yōu)橄吕?1、下拉32、下拉33、下拉34.....下拉3m_l，
下拉3m。
[0038]圖3a，3b為本發(fā)明所提供的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法的實(shí)施例二，
如圖3a所示，右側(cè)為分類導(dǎo)航菜單:菜單1、菜單2、菜單3、菜單4.....菜單n_l，菜單η;左側(cè)顯示為菜單對(duì)應(yīng)的下拉菜單，在圖3a中鼠標(biāo)移動(dòng)到菜單η-1，故為菜單η-1的下拉菜單:下拉(η-1) 1、下拉(η-1) 2、下拉(η_1)3、下拉(η_1) 4、...、下拉(n-l)m-l,下拉(n_l)m;目標(biāo)下拉菜單為下拉(η-1) 3。
[0039]該實(shí)施過程如下:監(jiān)聽到鼠標(biāo)移動(dòng)到菜單η-1，獲取鼠標(biāo)的位置A(Xx，Yy)和菜單η-1的下拉菜單位置8(1^，1)，(:(?1)，0(1);構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域ABC，三角形區(qū)域ABC為即時(shí)生成的圖片格式，當(dāng)監(jiān)聽到鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)除菜單η-1外該圖片還覆蓋菜單2、菜單3、菜單4、菜單...、菜單η的部分，圖片ABC自動(dòng)置于其覆蓋菜單的上方，使其被覆蓋部分無法響應(yīng)鼠標(biāo)事件；鼠標(biāo)沿著箭頭S的方向快速移動(dòng)到目標(biāo)下拉菜單下拉(η-1)3，當(dāng)然，只要在三角形區(qū)域ABC內(nèi)，鼠標(biāo)也可沿其他方向移動(dòng)至目標(biāo)下拉菜單下拉(η-1) 3。
[0040]圖3b當(dāng)監(jiān)聽到鼠標(biāo)在移動(dòng)的過程中移動(dòng)到菜單4的黑色原點(diǎn)處出現(xiàn)停頓，圖片ABC自動(dòng)置于其覆蓋菜單的下方，屏蔽功能消失，菜單η-1的下拉菜單消失，此時(shí)菜單4會(huì)即時(shí)響應(yīng)鼠標(biāo)移動(dòng)事件，下拉菜單也會(huì)同時(shí)變化成菜單4的下拉菜單(為與圖3a對(duì)照，圖片置于下拉菜單的下方)，此時(shí)下拉菜單變?yōu)橄吕?1、下拉42、下拉43、下拉44.....下拉
4m_l,下拉 4m。
[0041]以上所述是對(duì)本發(fā)明的較佳的【具體實(shí)施方式】，本【技術(shù)領(lǐng)域】人員應(yīng)當(dāng)理解，所述實(shí)施方式并非限定本發(fā)明的保護(hù)范圍。在不脫離本發(fā)明的精神實(shí)質(zhì)和原則下，在細(xì)節(jié)方面可以進(jìn)行變化或者修改，均應(yīng)涵蓋在本發(fā)明的權(quán)利要求范圍之內(nèi)。
【權(quán)利要求】
1.一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，其特征在于，該方法包括以下步驟: a.實(shí)時(shí)監(jiān)聽鼠標(biāo)在分類導(dǎo)航菜單內(nèi)的移動(dòng)事件，獲取目標(biāo)菜單的相關(guān)數(shù)據(jù)，包括菜單上的鼠標(biāo)位置A (Xx, Yy)，其下拉菜單的位置B (Mffl, Nn)，C (Pp, Qq)； b.構(gòu)建鼠標(biāo)可快速移動(dòng)區(qū)域，A、B、C三點(diǎn)，構(gòu)成一個(gè)鼠標(biāo)可任意快速移動(dòng)的三角形區(qū)域 ABC ； c.區(qū)域屏蔽，屏蔽三角形區(qū)域ABC覆蓋的目標(biāo)菜單的同級(jí)別菜單事件，使鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)其同級(jí)別菜單不響應(yīng)； d.鼠標(biāo)快速移動(dòng)通過三角形區(qū)域ABC，選擇目標(biāo)下拉菜單。
2.如權(quán)利要求1所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，若鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)出現(xiàn)停頓，屏蔽功能消失，響應(yīng)鼠標(biāo)移動(dòng)事件獲取新的數(shù)據(jù)，重新構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域；若鼠標(biāo)不在三角形區(qū)域ABC內(nèi)移動(dòng)，原三角形區(qū)域消失，響應(yīng)鼠標(biāo)移動(dòng)事件獲取新的數(shù)據(jù)，重新構(gòu)建鼠標(biāo)可快速移動(dòng)的三角形區(qū)域。
3.如權(quán)利要求1或2所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，所述屏蔽功能的實(shí)現(xiàn)方式為:根據(jù)數(shù)據(jù)信息，即時(shí)生成圖片式三角形區(qū)域ABC，當(dāng)監(jiān)聽到鼠標(biāo)在三角形區(qū)域ABC內(nèi)快速移動(dòng)時(shí)圖片自動(dòng)置于目標(biāo)菜單的同級(jí)別菜單的上方，使其無法響應(yīng)鼠標(biāo)事件；當(dāng)監(jiān)聽到鼠標(biāo)出現(xiàn)停頓時(shí)，圖片自動(dòng)變化置于菜單的下方，目標(biāo)菜單變化，即時(shí)響應(yīng)鼠標(biāo)移動(dòng)事件。
4.如權(quán)利要求2所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，三角形區(qū)域ABC變化時(shí)，同步顯示激活的下拉菜單的內(nèi)容。
5.如權(quán)利要求2所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，根據(jù)用戶使用需求預(yù)先設(shè)置鼠標(biāo)停頓的響應(yīng)時(shí)間。
6.如權(quán)利要求1所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，所述下拉菜單的位置B、C為下拉菜單標(biāo)簽的左上角和左下角。
7.如權(quán)利要求1所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，所述下拉菜單的位置B、C為下拉菜單標(biāo)簽的右上角和右下角。
8.如權(quán)利要求1或2所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，所述三角形區(qū)域ABC為用戶不可見。
9.如權(quán)利要求1或2所述的一種分類導(dǎo)航的下拉菜單設(shè)計(jì)實(shí)現(xiàn)方法，所述三角形區(qū)域ABC為用戶可見，用區(qū)別于菜單的顏色顯示其邊框或區(qū)域。
【文檔編號(hào)】G06F3/0482GK104077036SQ201310099602
【公開日】2014年10月1日 申請(qǐng)日期:2013年3月27日 優(yōu)先權(quán)日:2013年3月27日
【發(fā)明者】牟春林 申請(qǐng)人:蘇州精易會(huì)信息技術(shù)有限公司