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

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

例如：多層下拉菜單

          滑動(dòng)面板

          隱藏菜單鏈接

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

多層下拉列表

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

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

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

滑動(dòng)面板

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

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

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

隱藏菜單鏈接

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

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

整體選擇最適合自己的風(fēng)格

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

做任何最適合每個(gè)項(xiàng)目的事情，并愿意查看替代下拉列表，因?yàn)槟阌肋h(yuǎn)不知道在現(xiàn)實(shí)世界中你會(huì)發(fā)現(xiàn)什么樣的技術(shù)。