如何在響應(yīng)式設(shè)計中處理下拉導航菜單？

網(wǎng)站建設(shè)中，如何在響應(yīng)式網(wǎng)站使用下拉導航菜單？沒有一個正確的答案，但我想分享一些提示并查看一些示例，以幫助您考慮可能的解決方案，

例如：多層下拉菜單

          滑動面板

          隱藏菜單鏈接

現(xiàn)代網(wǎng)站需要做出回應(yīng)，這只是時代的標志，也證明了互聯(lián)網(wǎng)上事物的變化速度。這也稱為分層導航，其中一個鏈接具有子鏈接的下拉列表。這些在鼠標懸停和在菜單之間移動的桌面上有意義，但是如何處理移動設(shè)備上的多層下拉菜單？

多層下拉列表

第一個解決方案是保留分層下拉菜單，但只需重新構(gòu)建它們以獲得響應(yīng)式菜單。由于大多數(shù)較小的屏幕是垂直的，因此您通常會使用三條漢堡菜單代替簡單的導航塊。但是滑出菜單可以使用也向下滑動的下拉鏈接。但由于移動屏幕沒有足夠的空間，這些下拉菜單只會延長菜單的高度。子鏈接從左側(cè)推入，并且它們的文本也略小。這使得在快速瀏覽時可以輕松識別哪些鏈接是分層的。但是小箭頭是通用的視覺指示器，可以一目了然地輕松瀏覽。

加/減圖標是大多數(shù)人認可的另一種普遍圖標。它仍然代表相同的活動，但它是與主導航文本的單獨鏈接。偉大的導航也是創(chuàng)造性的導航，所以推動超出規(guī)范的限制是沒有錯的。這可能不是常態(tài)，甚至是最容易獲得的解決方案。但那些較小的菜單鏈接真的有必要嗎？

如果您的網(wǎng)站像論壇一樣工作，那么您可以隱藏下拉鏈接。嘗試不同的想法，看看最有效的方法。每個站點都不同，因此您必須自己測量每個項目。

滑動面板

所有響應(yīng)式菜單通常都具有“滑動”動畫。但是當我說滑動面板時，我說的是分層導航菜單滑入框架。這是一種我個人不喜歡的技術(shù)，但它對于非常大的菜單會很有效。菜單從頂部向下滑動，看起來這些是頁面鏈接。但是，如果你點擊任何一個，你將從側(cè)面獲得帶有內(nèi)部鏈接的滑動菜單。

這將創(chuàng)建一個分層系統(tǒng)，您只能在任何給定時間訪問某些鏈接。屏幕完全由一個菜單接管，內(nèi)部菜單在頂部附近都有一個小的“后退”按鈕。我不喜歡的是在菜單之間來回切換多少次。但我確實覺得這很簡單。它只是工作，沒有人應(yīng)該通過這個菜單工作。

想想用戶的一些小調(diào)整和問題點。它們似乎無法解決，但網(wǎng)站設(shè)計人員非常善于提出UI黑客攻擊。無論何時單擊鏈接，子鏈接都會從右側(cè)顯示，并覆蓋菜單的大部分內(nèi)容。但您仍然可以訪問圖標，這樣您只需輕按一下即可在主菜單鏈接之間切換。此外，藍色滑動菜單是可拖動的，因此移動用戶可以根據(jù)需要制作額外的屏幕空間來閱讀標簽。

隱藏菜單鏈接

最后也是最簡單的選項是隱藏所有子菜單鏈接?？煽刂频捻憫?yīng)導航，只要內(nèi)部鏈接無關(guān)緊要，這種策略就沒有錯。我不保證每個博客的這個策略; 但是，如果你試圖將一堆鏈接壓縮到標題中，它確實有意義。

當你離開論壇并進入公司/商業(yè)網(wǎng)站時，事情變得更加棘手。隱藏這些其他資源會限制對網(wǎng)站的訪問。但它也使瀏覽更容易，更直接。在為較小的頁面進行設(shè)計時，您總會找到權(quán)衡。如果您的下拉鏈接確實沒有必要，那么您可以隱藏內(nèi)部鏈接。

整體選擇最適合自己的風格

最終，整體上沒有“最佳”風格。您需要衡量每個Web項目并確定哪種響應(yīng)導航最合適。選擇多級導航設(shè)計也可能歸結(jié)為個人偏好。如果您個人喜歡一種導航風格而不是另一種導航風格，那么您將始終走這條路。

做任何最適合每個項目的事情，并愿意查看替代下拉列表，因為你永遠不知道在現(xiàn)實世界中你會發(fā)現(xiàn)什么樣的技術(shù)。