我們都在網(wǎng)上看到過大型導航和全屏下拉。它們在網(wǎng)絡(luò)上很常見，在有大量鏈接的網(wǎng)站上尤其有用。

但是設(shè)計一個大型的導航系統(tǒng)是很痛苦的。對于這些菜單沒有嚴格的指導方針，所以你必須研究其他人在做什么，并嘗試做出符合你的項目的東西。

學習這里:如何創(chuàng)建一個CSS3巨型下拉菜單。

讓我們來看看一些大型導航的趨勢，看看他們?nèi)绾问褂脗鹘y(tǒng)下拉菜單，并進一步推動它們。

深層次的類別

大型導航的最有價值的設(shè)計風格是柱狀結(jié)構(gòu)。

這讓您可以為鏈接指定“類別”，并在不使用多個彈出菜單的情況下創(chuàng)建更深的鏈接。一個大型的導航下拉菜單可以跨越整個頁面，這樣你就可以在一個下拉菜單中至少放置3-4列。

大型導航菜單設(shè)計趨勢在現(xiàn)代網(wǎng)站。

看看Wayfair，它使用了一種非常獨特的下拉菜單。他們有一個“部門”的鏈接，你可以按類別瀏覽，甚至可以分類，比如臥室>床頭柜。



這個鏈接的旁邊是一個“房間創(chuàng)意”的下拉菜單，你可以在這個房間里瀏覽。這個下拉菜單將圖片放在鏈接的旁邊，這樣你就可以更輕松地瀏覽各種選擇。

不需要很長時間就能意識到他們將導航項目劃分為類別。這些都遵循了一個類似的趨勢，Wayfair的男士導航只需要兩個主要的鏈接來工作!

超級菜單

另一家電子商務(wù)商店P(guān)uma也有類似的柱狀結(jié)構(gòu)。

但是他們會根據(jù)人口統(tǒng)計和項目劃分類別，然后在每個meganav中找到每一項的列(特色產(chǎn)品、服裝、運動等)。

注意，這些列有它們自己的標題，它們從其他鏈接中脫穎而出。它創(chuàng)建了一個真正的列結(jié)構(gòu)，因為您可以先瀏覽列標題，然后從那里瀏覽子鏈接。

類似的對幸運品牌的影響，但在設(shè)計上有一個扭曲。

下拉菜單

它們的所有列都有相同的顏色方案，但它們使用不同的字體。這可以使快速瀏覽更加困難，但它仍然是可用的。

幸運的動畫效果也很不錯，所以這是值得考慮的。

但是，如果你正在與一個大型導航系統(tǒng)進行斗爭，試著先把你的鏈接歸類到更深層的類別中。

寬屏下拉

這個趨勢在每個網(wǎng)站上都沒有使用，但我現(xiàn)在看到的更多了。

超大的導航菜單可以跨越整個頁面的寬度，為桌面和筆記本用戶創(chuàng)造更多的空間。移動用戶通常有隱藏的菜單，所以他們從來沒有真正看到完整的效果。

寬屏下拉

對Pluralsight的導航是一個很好的例子，它具有全屏超級菜單。內(nèi)容保持與頁面本身相同的寬度，但是菜單確實跨越了整個屏幕。

這是一個很酷的效果，因為它在菜單中創(chuàng)造了更多的空間?；蛘咧辽俳o人更多空間的視覺錯覺。 本文來源：杰云網(wǎng)絡(luò)，轉(zhuǎn)載請注明出處！如果需要 營銷型網(wǎng)站建設(shè)、 微商城、 小程序商城、 多端小程序 請聯(lián)系我們！