我們都在網(wǎng)上看到過(guò)大型導(dǎo)航和全屏下拉。它們?cè)诰W(wǎng)絡(luò)上很常見(jiàn)，在有大量鏈接的網(wǎng)站上尤其有用。

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

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

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

深層次的類(lèi)別

大型導(dǎo)航的*有價(jià)值的設(shè)計(jì)風(fēng)格是柱狀結(jié)構(gòu)。

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

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

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



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

不需要很長(zhǎng)時(shí)間就能意識(shí)到他們將導(dǎo)航項(xiàng)目劃分為類(lèi)別。這些都遵循了一個(gè)類(lèi)似的趨勢(shì)，Wayfair的男士導(dǎo)航只需要兩個(gè)主要的鏈接來(lái)工作!

超級(jí)菜單

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

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

注意，這些列有它們自己的標(biāo)題，它們從其他鏈接中脫穎而出。它創(chuàng)建了一個(gè)真正的列結(jié)構(gòu)，因?yàn)槟梢韵葹g覽列標(biāo)題，然后從那里瀏覽子鏈接。

類(lèi)似的對(duì)幸運(yùn)品牌的影響，但在設(shè)計(jì)上有一個(gè)扭曲。

下拉菜單

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

幸運(yùn)的動(dòng)畫(huà)效果也很不錯(cuò)，所以這是值得考慮的。

但是，如果你正在與一個(gè)大型導(dǎo)航系統(tǒng)進(jìn)行斗爭(zhēng)，試著先把你的鏈接歸類(lèi)到更深層的類(lèi)別中。

寬屏下拉

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

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

寬屏下拉

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

這是一個(gè)很酷的效果，因?yàn)樗诓藛沃袆?chuàng)造了更多的空間?；蛘咧辽俳o人更多空間的視覺(jué)錯(cuò)覺(jué)。 本文來(lái)源：智通澤軟件，轉(zhuǎn)載請(qǐng)注明出處！如果需要泊頭網(wǎng)站建設(shè) 泊頭小程序開(kāi)發(fā) 泊頭微信開(kāi)發(fā) 泊頭APP開(kāi)發(fā)請(qǐng)聯(lián)系封經(jīng)理，我們將提供上門(mén)服務(wù)！
聯(lián)系方式：手機(jī)：13393374114  座機(jī)：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：